2025-04-23

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

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

則解決辦法:

1、在觸發元素上的事件設置為延遲處理, 即可避免滯後反復執行的問題(使用setTimeout)

2、在觸發元素的事件時預先停止所有的動畫,再執行相應的動畫事件(使用stop)

jquery stop:

代碼如下:

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

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

代碼如下:

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

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *