Trigger jQuery Ereignisse nacheinander

Question

Hallo Ich versuche, eine Animation zu erstellen, in der eine Klasse erst nach der einen hinzugefügt wird, bevor es ausgelöst wird.

$('.flipper').click(function(){ 
    $('#first').addClass('first-flip'); 
    $('#second').addClass('second-flip'); 
    $('#fourth').addClass('fourth-flip'); 
}); 

so

$('#second').addClass('second-flip'); 

würde nur Auslöser, wenn

$('#first').addClass('first-flip'); 

seinen Prozess beendet ist.

so eine andere Erklärung wäre dies.

Block A hat einen Rotationseffekt hinzugefügt, nachdem Block A gedreht wurde, nur dann wird Block B um 20 px nach rechts verschoben.

Ich möchte im Grunde nur wissen, wie Jquery-Effekte erstellt werden, die in sequenzieller Reihenfolge auslösen.

Answer 1

Sie möchten an transitionend oder animationend binden. Hier ist ein Beispiel mit transitionend. Nachdem die Box sich bewegt hat, wird eine neue Klasse hinzugefügt, die den nächsten Übergang beginnt, um die Box blau zu machen.

var mydiv = document.querySelector("#mydiv"); 
 

 
document.querySelector("button").addEventListener("click", buttonHandler); 
 
mydiv.addEventListener("transitionend", onEndHandler) 
 
    
 
function buttonHandler() { 
 
    mydiv.classList.add("move-left"); 
 
} 
 

 
function onEndHandler() { 
 
    mydiv.classList.add("turn-blue"); 
 
}

#mydiv { 
 
    background: red; 
 
    width: 10em; 
 
    height: 10em; 
 
    transition: 1s; 
 
} 
 

 
#mydiv.move-left { 
 
    transform: translateX(100px); 
 
} 
 

 
#mydiv.turn-blue { 
 
    background: blue; 
 
}

<div id="mydiv"></div> 
 
<button>Move div</button>

Wenn Sie die jQuery-Version benötigen, ist es hier:

var mydiv = $("#mydiv"); 

$("button").on("click", buttonHandler); 
mydiv.on("transitionend", onEndHandler) 

function buttonHandler() { 
    mydiv.addClass("move-left"); 
} 

function onEndHandler() { 
    mydiv.addClass("turn-blue"); 
} 

Nizza Ressource: https://davidwalsh.name/css-animation-callback