淡入淡出同时发生页

Question

我有一个jQuery动画功能，淡入淡出两个div的鼠标悬停/退出。

但是，我需要同时执行淡入和淡出 - 当前第一个div淡入，然后第二个div淡出 - 我需要两个同时发生。当前代码如下：

var showElements = function(){ 
    $('#hover-advanced').animate({opacity: "1.0"}, 300),$('#hover-standard').animate({opacity: "0.3"}, 300); 

} 

有没有人知道这是可能的？

感谢

Answer 1

动画（）函数有一个队列的选择......让假有动画看起来好像它们是同时进行 -

var showElements = function(){ 
    $('#hover-advanced').animate({opacity: "1.0"}, {duration: 300, queue: false}),$('#hover-standard').animate({opacity: "0.3"}, {duration: 300, queue: false}); 
} 

jQuery的动画（）文档 -

Answer 2

您的动画做在同一时间运行。它们似乎只是一个接一个地发生，因为我们对不透明度的看法与不透明度的值不是线性的。当其他元素已经开始褪色时，我们根本看不到该元素变得完全不透明。

如果使用更长的动画时间，您会看到它们实际上是同时运行的。

你可以尝试使用linear宽松，而不是默认swing宽松，看看它看起来更好：

$('#hover-advanced').animate({opacity: "1.0"}, 300, "linear"); 
$('#hover-standard').animate({opacity: "0"}, 300, "linear"); 

另一种选择是不运行同时进行动画。如果添加的延迟是可见的动画，他们将似乎同时运行：

$('#hover-advanced').delay(100).animate({opacity: "1.0"}, 300); 
$('#hover-standard').animate({opacity: "0"}, 300);