1. 程式人生 > >jQuery停止動畫和判斷是否處於動畫狀態(轉)

jQuery停止動畫和判斷是否處於動畫狀態(轉)

停止元素的動畫

停止所有在指定元素上正在執行的動畫。

很多時候需要停止匹配元素正在進行的動畫,如果需要在某處停止動畫,需要使用stop()方法。stop()方法的語法縮構為:

stop([clearQueue], [gotoEnd])

引數clearQHCHC和gotoEnd都是可選的引數,為Boolean值(ture或flase)。

clearQueue如果設定成true,則清空佇列,可以立即結束動畫。

gotoEnd讓當前正在執行的動畫立即完成,並且重設show和hide的原始樣式,呼叫回撥函式等。

如果接使用stop()方法,經常會遇到這種情況.在為某個元索繫結hover事件之後,使用者把游標移入元素時會觸發動畫效果,而當這個動畫還沒結束時,使用者就將游標移出這個元素了,那麼游標移出的動畫效果將會被放進佇列之中,等待游標移入的動畫結束後再執行。因此如果游標移入移出過快就會導致動畫效果與游標的動作不一致。

此時只要讓游標的移入、移出動作之前加入stop()方法,就能解決這個問題。stop()方法會結束當前在進行的動l畫,並立即執行佇列中個動畫。

判斷元素是否處於動畫狀態

在使用animate()方法的時候,要避免動畫積累而導致的動畫與使用者的行為不一致。當用戶快速在某個元素執行animate()動畫時,就會出現動畫積累。解決方法足判斷元素是否正處於動畫狀態,如果元素不處於動畫狀態,才為元素新增新的動畫,否則不新增。程式碼如下:

if($(element).is(":animated")){    //判斷元素是否正處於動畫狀態
//如果當前沒有進行動畫,則新增新動畫
}

這個判斷方法在animate()動畫中經常被用到,需要特別注意。