基於jQuery的連續hover觸發重複動畫

2021-08-27 05:05:44 字數 690 閱讀 9760

當我們設定hover實現動畫效果的時候,我們把滑鼠快速反覆在目標元素移來移去,會發現滑鼠最後離開後,動畫依然在進行很多次,有時會導致動畫錯亂。

之所以會出現這種情況,是因為我們每次觸發hover時都會執行一次動畫,當我們來回這樣快速移動到目標元素上時並反覆操作,這時會導致動畫重複多次,而由於我們移動到目標元素上時比較快速的,這就導致,上一次動畫未結束,這次動畫就緊接著來了,所以會導致動畫的錯亂。

我們解決這一情況的原理是:當我們觸發hover時先清空之前所有的動畫,並使當前正在執行的動畫立馬完成。

jquery的stop方法可以解決上述的問題,

stop([clearqueue],[gotoend]):

第乙個引數[clearqueue]: [false,true], 是否清除佇列,若為true,則清空佇列,立即結束動畫;

第二個引數[gotoend]: [false,true],  當前正在執行的動畫是否立即完成,若為true,則完成佇列,立即完成動畫;

在這裡我們把兩個引數都設定為true,當有多個動畫時,再次觸發hover執行動畫時,會清空所有的動畫佇列 ,並且使正在執行的動畫立即完成,然後再進行本次動畫,這樣就不會導致動畫錯亂。

$(".img").hover(function(),800);

},function(),800);

});

原文請檢視鏈結

基於jquery的 ajax async使用

預設設定下,所有請求均為非同步請求。如果需要傳送同步請求,請將此選項設定為 false。注意,同步請求將鎖住瀏覽器,使用者其它操作必須等待請求完成才可以執行 預設 true 預設設定下,所有請求均為非同步請求。如果需要傳送同步請求,請將此選項設定為 false。注意,同步請求將鎖住瀏覽器,使用者其它...

基於jQuery的facebox使用

它是什麼?text 僅僅這樣就ok。然後我們在來看 用facebox div text ok,就這樣就能簡單的實現facebox了。當然在ajax橫行的時代,ajax遠端載入頁面也是必不可少的。我們 用facebox載入遠端的頁面內容 text ok,這樣就能遠端載入 cssrain.html 的內...

基於jquery的ajax封裝

jquery給我們的開發帶來了很多的便利,對其熟練的運用是現在前端開發人員的必要技能之一。其封裝的很多方法都做了相容的處理,就少去了部分開發人員做相容處理的問題,從而提高工作效率,有更多時間來學習其它技能 今天來聊聊其的ajax 方法,ajax 方法通過 http 請求載入遠端資料。ajax 返回其...