完全同时淡出两个元素

我有两个元素应该完全同时出现。我以为我可以用这个代码实现它：完全同时淡出两个元素

$('.arrow-dock, .dropdown-menu', dropdown).stop(true, true).delay(delay).fadeIn("fast");

但似乎不同的浏览器执行fadeIn()随后不同时。不同浏览器中的淡入淡出有不同的延迟。有没有办法在同一时间启动这些淡入淡出效果？

2017-04-04 Juuro

一个很多很多的原因，我从来没有与JavaScript的动画。为什么不只是为所有元素添加一个类，并让CSS转换处理其余的？ –

你可以做我们的小提琴吗？我的（非常基本的）例子没有表现出这种行为。 http://jsfiddle.net/daveSalomon/xBB5x/13558/ –

我还没有能够复制这些元素不会褪色在一起的问题，但是我可以相信它发生了，因为如果DOM很大或者已经发生大量的处理，那么使用JS的动画相当不可靠。

为了帮助解决这个问题，您可以使用CSS来执行动画。这有硬件加速的好处，因此在重负载下应该受到更少的影响。试试这个：

var dropdown = $('#dropdown'); 
$('.arrow-dock, .dropdown-menu', dropdown).addClass('show');

#dropdown > div { 
    opacity: 0; 
    transition: 0.3s opacity 1s; 
} 
#dropdown > div.show { 
    opacity: 1; 
}

2017-04-04 12:06:36

是的，现货... –

首先，我正在寻找一种可能性来同步JavaScript中的动作。但我发现在我的情况下，CSS也适用。我甚至不需要用JavaScript添加一个类，因为我的操作完全依赖于悬停。 – Juuro

回答