一個接一個地觸發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