完全同时淡化两个元素

Question

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

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

但似乎不同的浏览器随后不同时执行fadeIn()。不同浏览器的淡入淡出之间存在不同的延迟。 有没有办法在同一时间开始这些淡化？

Answer 1

我无法复制元素不会消失的问题，但是我可以相信它正在发生，因为如果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;
}

Working example