jQuery 动画链接

Question

我有一张图片，我希望开始时不可见，然后在某个时候变得可见，然后在 2 秒的持续时间内将其不透明度降低到 0.5。 这是我希望发生这种情况时使用的代码:

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

我的问题是，按原样使用代码，图像直接变为可见的不透明度为 .5，但我想要的是图像变为可见(正常不透明度为 1)，然后才动画为不透明度。 5个 感谢您的宝贵时间，

Answer 1

我认为您需要将元素的初始显示设置为 none 首先添加添加类 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>