jquery - 淡入淡出在页面上同时发生

Question

我有一个 jquery animate 函数，可以在鼠标悬停/退出时淡入淡出两个 div。

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

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

}

有谁知道这是否可能？

谢谢

Answer 1

animate() 函数有一个队列选项...使动画看起来好像它们同时完成一样为假-

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

jQuery 动画（）文档 - http://api.jquery.com/animate/

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