Question

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

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

这是我目前的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

我可以使用animate函数包装fadeTo函数，但它会更改之前元素的不透明度，而不是同时< / strong>，因为我需要。

如何在设置动画的同时更改元素的opacity？

提前致谢！

Answer 1

opacity属性的值可以是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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

初始化不透明度。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用更多CSS解决方案替换.animate（）。

实施例：

＆＃13;

$(document).ready(function() {
  $("#moveIt").addClass('animate');
});

＆＃13;

.element {
  position: relative;
  left: 200px;
  height: 300px;
  width: 300px;
  background-color: red;
  transition: all 1.5s; /* change speed here (1.5s)*/
  opacity: 0;
}

 /* Values to animate to */
.animate {
  opacity: 1;
  left: 0;
}

＆＃13;

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

＆＃13;

如何为一个元素设置动画，同时改变其不透明度？

3 个答案: