Zwei Animationen zum gleichzeitigen Überblenden?

Question

Ich versuche, zwei Animationen auf dem Bildschirm zur gleichen Zeit zu verblassen. Dies ist derzeit unmöglich, weil eine Animation wartet, bis der 'typed.js' -Effekt beendet ist, bevor die Animationsverzögerung gezählt wird.

Um also zwei animationsfadeIn gleichzeitig haben zu müssen, muss ich verschiedene animation-delay einstellen.

Die jsfiddle zeigt das Problem:

https://jsfiddle.net/harrydry/p4ev1nj2/13/

Lediglich die Animation Verzögerung auf zwei verschiedene Arten einstellen, so dass sie synchron zu kommen, ist keine Lösung. Da die gesamte Animation viel komplexer ist, wird das nicht funktionieren. Ich habe die CSS-Animationen Plugin wie abgebildet verwendet:

<span class="line1 animated fadeIn">Jim Jarmusch</span> 

Answer 1

wenn jQueryfadeIn() eine Option ist, können Sie eine gemeinsame Klasse als Selektor verwenden können und die Animation wird simultan:

HTML

<div style="display:none" class="test"> 
    Test 1 
</div> 
<div style="display:none" class="test"> 
    Test 2 
</div> 
<div style="display:none" class="test"> 
    Test 3 
</div> 
<div style="display:none" class="test"> 
    Test 4 
</div> 

JS

$(document).ready(function() { 
    $('.test').fadeIn('slow'); 
}); 

Fiddle

https://jsfiddle.net/ygzyoyxx/