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

【问题标题】：Fade in and out to happen simultaneously on page淡入淡出在页面上同时发生
【发布时间】：2012-07-15 00:33:41
【问题描述】：

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

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

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

}

有人知道这是否可行吗？

谢谢

【问题讨论】：

似乎按预期工作：jsfiddle.net/sveinatle/UDw6u

标签： jquery

【解决方案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 动画() 文档 - http://api.jquery.com/animate/

【讨论】：

由于动画是针对不同元素的，它们有单独的队列，所以没有任何区别。它们看起来完全一样：jsfiddle.net/7fetn
谢谢@Guffa。不知道。
嗨 - 是吗？ - 这两个 div 有背景图像......现在，在您的示例中将队列设置为 false，不透明动画看起来就像它根据需要同时发生。
@Marc：在不设置 queue 属性的情况下尝试一下，看看是否真的有什么不同。检查我上面贴的fiddle，显示没有区别。
嗨 - 我已经按照你的建议尝试过，是的 - 有区别！如果没有 queue 属性，我会遇到动画一个接一个出现的问题。当我使用队列属性时，问题消失了，动画同时出现。

【解决方案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);

【讨论】：