Question

我想要开始看不到的图像，然后在某些时候可见，然后在2秒的持续时间内将其不透明度降低到.5。以下是我想要实现的代码：

  $("#image").removeClass("notVisible").addClass("visible").animate({
                    opacity: 0.5,
                  }, 2000);

我的问题是，使用代码，图像直接可见到.5的不透明度，但我想要的是图像变得可见（正常不透明度为1），然后才动画化为不透明度。五谢谢你的时间，

Answer 1

.fadeTo()方法为匹配元素的不透明度设置动画。

持续时间以毫秒为单位;值越高表示动画越慢，而动画越快。可以提供字符串'fast'和'slow'以分别指示200和600毫秒的持续时间。如果提供了任何其他字符串，则使用400毫秒的默认持续时间。与其他效果方法不同，.fadeTo（）要求明确指定持续时间。

$( "#clickme" ).click(function() {
  $( "#book" ).fadeTo( "slow" , 0.5, function() {
    // Animation complete.
  });
});

来源：https://api.jquery.com/fadeTo/

在你的情况下：

$("#image").removeClass("notVisible").addClass("visible").fadeTo( 2000 , 0.5)

并在css中将#image opacity设置为1。

这个http://jsfiddle.net/FLMp8/26/

还有一个很棒的JsFiddle

Answer 2

我认为您需要使用visible的初始显示设置元素，然后首先添加类notVisible，然后删除notVisible类，以使其显而易见。因为首先删除$("#image").addClass("visible").removeClass("notVisible").animate({ opacity: 0.5, }, 2000);类，将立即显示该元素。

.notVisible{
	display: none;
}
.visible{
	display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notVisible" id="image" style="background:red;width:50px;height:50px;"></div>

dlls

Answer 3

喜欢这个吗？

＆＃13;

$(document).ready(function(){
  var y = setInterval(function(){
    $("#myElem").css('display', 'block').fadeTo(2000, 0.5);
    clearInterval(y);
  },2000);
});

＆＃13;

#myElem{
display: none;
width: 100px;
height: 100px;
background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myElem"></div>

＆＃13;

＆＃13; 你说你希望元素从不可见的开始，我做了。然后，2秒后，它出现，然后在2秒内立即开始消失，就像你要求的那样。

jQuery动画链接

3 个答案: