完全同時淡出兩個元素

我有兩個元素應該完全同時出現。我以爲我可以用這個代碼實現它：完全同時淡出兩個元素

$('.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

回答