完成前一個事件後開始一個事件

點擊一個按鈕後事件的下一個腳本我希望最後2個jQuery事件在動畫完成之後開始。完成前一個事件後開始一個事件

我該怎麼做？

<script> 
$(document).ready(function() { 
    $("button").click(function(){ 
     $("img:first").removeClass("bounceIn").addClass("animated lightSpeedOutleft") 
     $("img:last").removeClass("bounceIn").addClass("animated lightSpeedOut"); 
     $("button:first").removeClass("bounceIn").addClass("animated flipOutX"); 
     $('div:first-child').addClass("display"); 
     $('div:last-child').removeClass("display").addClass("animated fadeInUp"); 
    }); 
}); 
</script>

來源

2014-02-12 Diegolops

如果您知道CSS動畫的持續時間，則可以使用setTimeout來延遲您的響應。

/// say this lightSpeedOutleft CSS animation takes a second to complete 
$("img:first").removeClass("bounceIn").addClass("animated lightSpeedOutleft") 
/// set your timeout for a second 
setTimeout(function(){ 
    /// do further things here. 
}, 1000);

但是，如果你不知道的動畫時間—或者您希望更精確—可以用動畫的特定事件。雖然被警告，這些事件是相當新的，不會在所有瀏覽器全面實施然而，在某些他們將需要供應商前綴：

AnimationStart
AnimationIteration
AnimationEnd

例用法：

$("img:first") 
    .removeClass("bounceIn") 
    /// you can list your vendor prefixed events here, or implement a better 
    /// vendor-prefix detection solution. 
    .on('animationend webkitAnimationEnd', function(e){ 
    if (e.animationName == 'YOUR CSS animation-name GOES HERE') { 
     /// do something else here depending on e.animationName 
    } 
    }) 
    .addClass("animated lightSpeedOutleft") 
;

關於這些事件的幾個地方：

所有的事情考慮，使用setTimeout是完全有效的，特別是對於簡單的動畫。

來源

2014-02-12 22:13:03 Pebbl

有關添加.delay(500)功能是什麼？

來源

2014-02-12 22:06:36 Simon

'delay（）'意味着與'fx'隊列一起使用。由於沒有jQuery動畫實際發生在這裏，所以恐怕沒有關係。 – Boaz

完成前一個事件後開始一個事件

回答

相關問題