Fade zwei Elemente genau zur gleichen Zeit

Question

Ich habe zwei Elemente, die genau zur gleichen Zeit erscheinen sollten. Ich dachte, ich es mit diesem Code erreichen könnte:

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

Aber es scheint, der verschiedene Browser die fadeIn() anschließend nicht gleichzeitig ausführen. Es gibt unterschiedliche Verzögerungen zwischen den Überblendungen in verschiedenen Browsern. Gibt es eine Möglichkeit, diese Fades gleichzeitig zu starten?

Answer 1

Ich konnte das Problem nicht replizieren, wo die Elemente nicht zusammen verblassen, aber ich kann glauben, dass es passiert, da Animation mit JS ziemlich unzuverlässig ist, wenn das DOM groß ist oder bereits viel Verarbeitung stattfindet .

Um das Problem zu beheben, können Sie stattdessen CSS verwenden, um die Animation auszuführen. Dies hat den Vorteil, dass es hardwarebeschleunigt ist und daher weniger unter schweren Lasten leiden sollte. Versuchen Sie folgendes:

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