一个接一个地触发jQuery事件

Question

嗨我试图创建一个动画，其中一个类只在触发完成之后才添加。

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

所以

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

只会当

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

已经完成它的过程中触发。

所以，另一种解释这种方式是。

块A具有旋转效果，在块A旋转后，块B只向右移动20px。

我基本上只想知道如何创建按顺序触发的Jquery效果。

Answer 1

您想要连接到transitionend或animationend。以下是使用transitionend的示例。框完成移动后，将添加一个新类，该类将开始下一个转换以将框转为蓝色。

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>

如果你需要jQuery的版本，它在这里：

var mydiv = $("#mydiv"); 

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

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

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

尼斯资源：https://davidwalsh.name/css-animation-callback