jquery - 如何为元素设置动画同时更改其不透明度？

Question

我希望一个元素制作一个从左到右的动画，将其不透明度从 0 更改为 1。

我已经为元素设置了动画，但我无法同时更改其不透明度。

这是我目前拥有的代码:

$("#moveIt").animate({left:0, opacity:"show"}, 1500);

#moveIt{
  position: relative;
  left: 200px;
  height: 300px;
  width: 300px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="moveIt">
  <span>This is the div that I want to move</span>
</div>

我知道 JQuery 上有一个名为 fadeTo 的函数 但我不知道如何将它与 animate 结合起来 在我为元素设置动画的同时更改元素的不透明度的函数。

我可以用 fadeTo 函数包装 animate 函数，但它会在 动画函数触发之前改变元素的不透明度，而不是 同时，根据我的需要。

如何在设置动画的同时更改元素的不透明度？

提前致谢!

Answer 1

不透明度属性可以取 0.0 - 1.0 之间的值。

http://www.w3schools.com/css/css_image_transparency.asp

改变

$("#moveIt").animate({left:0, opacity:"show"}, 1500);

到

$("#moveIt").animate({left:0, opacity:1}, 1500);

如果你想淡入然后使用 css 在页面加载时设置不透明度 0 并使用 .animate() 将其更改为 1

$("#moveIt").animate({left:0, opacity: 1}, 1500);

#moveIt{
  position: relative;
  left: 200px;
  height: 300px;
  width: 300px;
  background-color: red;
  opacity : 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="moveIt">
  <span>This is the div that I want to move</span>
</div>