点击时CSS不透明度转换

问题描述 投票：0回答：5

有什么方法可以让该图像使用定义的 CSS 过渡淡入淡出吗？现在它刚刚弹出到完全不透明。 

var makeImage = function() {
    $('#image').remove();

    $(document.body).append('<img id="image" class="fadeIn" src="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1" />');

    var img = $('#image')[0];
    console.log(img.style);
    img.style["opacity"] = 1;
  };
.fadeIn {
    opacity: 0;
    -moz-transition: opacity 5.5s ease 0.300s;
    -webkit-transition: opacity 5.5s ease 0.300s;
    -o-transition: opacity 5.5s ease 0.300s;
    transition: opacity 5.5s ease 0.300s;
  }
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<title>Fade Example</title>
<input id="makeButton" type="button" value="Make and fade" onclick="makeImage()" ; />

编辑：我意识到jquery提供了一个fadeIn函数。我很遗憾在这个例子中使用了 jquery，因为重点是使用 CSS 过渡属性来做到这一点。

jquery html css transition
5个回答
0
投票

它会弹出完全不透明度，因为您在脚本中将不透明度设置为完全（ 1 = 100% ）：

img.style["opacity"] = 1;

我不确定 CSS 转换是如何工作的，但既然你仍然使用 jQuery：

var makeImage = function() {
  $('#image').remove();

  $(document.body).append('<img id="image" class="fadeIn" src="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1" />');

  var img = $('#image')[0];
  console.log(img.style);
  img.fadeIn(5500);
};
0
投票

听起来你的问题最简单的答案就是使用 JQuery 的 .fadein()。

JQuery 自己的示例代码应该有助于参考这里。

$('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
        // Animation complete
      });
    });
0
投票

这将运行一次，并且 

forwards
将指定的所有值设置为 100% 时给出的值。

. fadeIn {
  animation: fade-in 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  100% {   
    opacity: 1;
  }

并且是一个纯 CSS 解决方案，就像您在编辑中所要求的那样。

0
投票

这是一个解决方案。它只是使用jquery的css功能。这是 jsfiddle 中的：https://jsfiddle.net/74rgwh38/

$(document).ready(function() {
  $("#clickHere").click(function() {
    $('#image').remove();

    $(document.body).append('<img id="image" class="fadeIn" src="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1" />');
setTimeout(function(){ $("#image").css('opacity', '1'); }, 1);
  });
});
.fadeIn {
  opacity: 0;
  -moz-transition: opacity 5.5s ease 0.3s;
  -webkit-transition: opacity 5.5s ease 0.3s;
  -o-transition: opacity 5.5s ease 0.3s;
  transition: opacity 5.5s ease 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <button id="clickHere">
    ClickHere
  </button>
</body>

它不是纯CSS，但它使用CSS过渡属性。

-1
投票

我假设，您只是想在单击按钮时应用类 

.fadeIn
，因为您已经在使用 jQuery，请执行以下操作：

img.addClass('fadeIn');

我猜，你想要的是在单击或加载时更改/切换图像的不透明度（通过使用 CSS3 而不是 jQuery），试试这个：

创建两个 CSS 类，如下所示：

.fadeIn {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
     transition: opacity 1s ease-in-out;
}
.transparent
{
    opacity:0;
}

只需单击按钮或加载时即可切换透明类：

$('#toggle').click(function(){
    $('#image').toggleClass('transparent');
});

请参阅此 fiddle 以获取完整且有效的代码。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.