jquery - jQuery动画链接

我有一张我想开始不可见的图像，然后在某点变为可见，然后在2秒钟的时间内将其不透明度降低到0.5。
这是我希望发生这种情况时需要的代码：

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

我的问题是，按原样使用代码，图像可以直接以0.5的不透明度可见，但是我想要的是图像变得可见（正常不透明度为1），然后才将其动画为不透明度.5
谢谢你的时间，

最佳答案

我认为您需要将元素设置为初始显示为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>