jQuery動畫出現連續觸發、滯後反覆執行的解決方法_jquery

本文實例講述了jQuery動畫出現連續觸發、滯後反覆執行的解決方法。分享給大家供大家參考。具體分析如下：

jQuery中slideUp 、slideDown、animate等動畫運用時，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，其表現不雅。

則解決方法：

1、觸發元素上的事件設定為延遲處理, 即可避免滯後反覆執行的問題（使用setTimeout）

2、在觸發元素的事件時預先停止所有的動畫，再執行對應的動畫事件（使用stop）

jquery stop：

複製程式碼 程式碼如下:

//語法結構
$("#div").stop();//停止目前動畫，繼續下一個動畫
$("#div").stop(true);//清除元素的所有動畫
$("#div").stop(false, true);//讓目前動畫直接到達末狀態 ，繼續下一個動畫
$("#div").stop(true, true);//清除元素的所有動畫，讓目前動畫直接到達最後狀態

這裡推薦使用第二種方法：

複製程式碼 程式碼如下:

$("#div").stop().animate({width:" 100px"},100);

希望本文所述對大家的jQuery程式設計有所幫助。