我如何让一个元素同时改变它的不透明度?

I would like that an element makes an animation from left to right changing its opacity from 0 to 1.

我想要一个元素使动画从左到右改变它的不透明度从0到1。

I have animated the element but I cannot change its opacity at the same time.

我已经激活了元素，但是我不能同时改变它的不透明度。

This is the code that I have by the moment:

这是我现在的代码:

$("#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>

I know that there is a function on JQuery called fadeTo but I do not know how to combine it with animate function to change the opacity of the element at the same time I animate the element.

我知道JQuery中有一个函数叫做fadeTo，但我不知道如何将它与动画功能结合起来，以改变元素的不透明度。

I can wrap the animate function with fadeTo function but it changes the opacity of the element before the animate function fires, not at the same time, as I need.

我可以用fadeTo来包装动画功能，但是它会在动画功能触发之前改变元素的不透明度，而不是在我需要的时候。

How can I change the opacity of the element at the same time I animate it?

我怎样才能改变元素的不透明度，同时使其动画?

Thanks in advance!

提前谢谢!

3 个解决方案

#1

The opacity property can take a value from 0.0 - 1.0.

不透明度属性可以从0.0 - 1.0中取值。

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

Change

改变

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

来

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

if you want to fade in then set opacity 0 on page load using css and change it to 1 using .animate()

如果你想要淡出，那么在页面加载中使用css设置不透明度0，并将其改为1。animate()

$("#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>

#2

Initialize the opacity.

初始化的不透明度。

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

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

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

#3

You can replace .animate() with a more CSS solution.

您可以用一个更多的CSS解决方案来替换。animate()。

Example:

例子:

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

.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;
}

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

#1