jquery動畫順序執行 JQuery動畫佇列詳解

2021-10-16 18:37:56 字數 1157 閱讀 6131

jquery動畫存在乙個佇列,當在jquery物件上呼叫動畫方法時,如果物件正在執行某個動畫效果,那麼會把後面的動畫效果,放在乙個佇列裡面,然後按順序執行動畫佇列裡面的每乙個動畫。

$box.hide(1000, function(){

$box.show(1000, function(){

$box.fadeout('slow',function(){

$box.fadein('slow',function(){

$box.slideup(function(){

$box.slidedown(function(){

console.log('動畫執行完畢')

//等價於$box.hide(1000)

.show(1000)

.fadeout()

.fadein()

.slideup()

.slidedown(function(){

console.log('真的完畢了')

stop([clearqueue], [jumptoend]);

stop()這個函式可以停止當前jquery物件裡每個dom元素正在執行的動畫。stop有兩個引數,適用於所有jquery效果函式,包括滑動,淡入淡出和自定義動畫。(show, hide, toggle並不能算動畫, 實質就是css的靜態效果)

這兩個引數的含義分別代表:

clearqueue(default: false):是否會清除動畫佇列

jumptoend(default: false):是否立即完成當前動畫

stop(false, false): 當引數都為false時,元素會立即結束當前的動作,不管當前動畫有沒有完成,直接跳過這一步進入下乙個佇列,直到完成佇列裡的所有動畫。

stop(true, false): 當引數為true和false時,說明清除了動畫佇列,並且不再繼續執行當前未完成的動畫。

stop(true, true): 當兩個引數都為true時,清除了動畫佇列,但是當前動畫動作直接跳到了完成後的畫面,也就是說沒有了執行的過程直接到了最後狀態。

finish(): 停止當前動畫,並清除動畫佇列中所有未完成的動畫,最終展示動畫佇列最後一幀的最終狀態。

該方法與 .stop(true,true) 方法類似,不同的是,finish() 也會引起所有排隊動畫的 css 屬性停止。

動畫執行JQuery學習 7 動畫

本文是一篇關於動畫執行的帖子 首先 最用常的 hide show function else slide function button2 bind click function button3 bind click function fade 每日一道理 聽,是誰的琴聲,如此淒涼,低調的音,緩慢的...

防止jquery重複執行動畫

其實很簡單,只需在觸發元素上的事件設定為延遲處理,即可避免滯後反覆執行的問題.例如 當滑鼠滑過按鈕後 0.2 秒,選單才會展開,如果滑鼠離開按鈕,展開的處理將被終止.也就是說,想要展開選單滑鼠必須有 0.2 秒的事件停留在按鈕上,那麼迅速地劃過按鈕是無法執行展開事件的.捲起也是如此.下面我們用 來解...

jQuery動畫連續觸發 滯後反覆執行解決辦法

在做乙個滑鼠進出,遮罩層上下移動時,遇見的問題 如圖所示 只要用滑鼠不斷進出,因動畫未執行完成就觸發下乙個事件,使動畫效果滯後和反覆執行,效果非常不佳.解決辦法如下 利用jquery的stop 方法.如下圖 masked mouseover function 500 mouseout functio...