Question

我有一个jquery动画功能，可以在鼠标悬停/退出时淡入和淡出两个div。

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

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

}

有人知道这是否可行？

由于

Answer 1

animate（）函数有一个队列选项...将其设为false以使动画显示为同时完成 -

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

jQuery animation（）文档 - 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);

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

2 个答案: