jquery事件hover、mouseenter、mouseleave只觸發一次動畫

jquery hover mouseenter mouseleave事件只觸發一次動畫

jquery.mouseenter(function(){
    $(div).animate({'margin-top':'100px'},1000)
})
jquery.mouseleave(function(){
    $(div).animate({'margin-top':'200px'},1000)
})

滑鼠移動到某個div上，觸發mouseenter事件和動畫，移出觸發mouseleave事件和動畫，但來回劃過這個div，事件就被觸發了多次，動畫也要重複好幾遍，怎麼才能在動畫執行過程中，不觸發mouseenter、mouseleave事件呢，即動畫過程中，滑鼠劃過這個div之後，動畫不會重複出現，只有動畫完了，再劃過，才會觸發

你可以使用stop方法：

$(div).stop(false, true).animate({'margin-top':'100px'},1000);

如果stop()的第一個參數為true，表示立即清除目前的動畫佇列，預設為fx；如果第二個參數為true，表示立即將目前正在執行的動畫置為它的結束狀態。

執行動畫前判斷：

if (!$(obj).is(':animated')) {    // to do something
}

如果所選的Element沒有在正在動畫中狀態，則執行動畫。否則忽略

^_^ （碰到了從前清楚解答過的問題的表情）

這個被 @Humphry 稱為「動畫原子性問題」。就是說如果動畫動作是一個不可重入的原子性過程，那麼在程式碼中要如何實現這個特性。

一個很清楚的答案請見這裡。答案的方式是顯而易見的標誌位法：對準做動畫的元素，動畫開始時置標，結束時（用回調函數）去掉。有標誌時不得觸發啟動動畫的事件即可。

以上是jquery事件hover、mouseenter、mouseleave只觸發一次動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！