快捷導(dǎo)航

jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法

更新時(shí)間：2015年01月28日 10:48:25 投稿：shichen2014

這篇文章主要介紹了jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法,實(shí)例分析了針對(duì)jQuery中slideUp、slideDown、animate等動(dòng)畫運(yùn)用時(shí)出現(xiàn)的滯后反復(fù)執(zhí)行等問(wèn)題的解決方法,需要的朋友可以參考下

本文實(shí)例講述了jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法。分享給大家供大家參考。具體分析如下：

jQuery中slideUp 、slideDown、animate等動(dòng)畫運(yùn)用時(shí)，如果目標(biāo)元素是被外部事件驅(qū)動(dòng), 當(dāng)鼠標(biāo)快速地連續(xù)觸發(fā)外部元素事件, 動(dòng)畫會(huì)滯后的反復(fù)執(zhí)行，其表現(xiàn)不雅。

則解決辦法：

1、在觸發(fā)元素上的事件設(shè)置為延遲處理, 即可避免滯后反復(fù)執(zhí)行的問(wèn)題（使用setTimeout）

2、在觸發(fā)元素的事件時(shí)預(yù)先停止所有的動(dòng)畫，再執(zhí)行相應(yīng)的動(dòng)畫事件（使用stop）

jquery stop：

復(fù)制代碼代碼如下:

//語(yǔ)法結(jié)構(gòu) 

$("#div").stop();//停止當(dāng)前動(dòng)畫，繼續(xù)下一個(gè)動(dòng)畫 

$("#div").stop(true);//清除元素的所有動(dòng)畫 

$("#div").stop(false, true);//讓當(dāng)前動(dòng)畫直接到達(dá)末狀態(tài) ，繼續(xù)下一個(gè)動(dòng)畫

$("#div").stop(true, true);//清除元素的所有動(dòng)畫，讓當(dāng)前動(dòng)畫直接到達(dá)末狀態(tài)

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

復(fù)制代碼代碼如下:

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

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)根據(jù)類型自動(dòng)顯示和隱藏表單
這篇文章主要給大家分享了jQuery實(shí)現(xiàn)根據(jù)類型自動(dòng)顯示和隱藏表單的代碼，非常的簡(jiǎn)單實(shí)用，僅僅10行代碼，推薦給大家，希望能給大家一些提示。
2015-03-03
jQuery實(shí)現(xiàn)簡(jiǎn)易QQ聊天框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易QQ聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
jQuery實(shí)現(xiàn)文章圖片彈出放大效果
本文主要介紹jQuery實(shí)現(xiàn)文章圖片彈出放大效果的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-04-04
完美兼容各大瀏覽器的jQuery仿新浪圖文淡入淡出間歇滾動(dòng)特效
本文是作者學(xué)習(xí)jQuery之后練手之作，兼容各大瀏覽器，非常的精美實(shí)用，這里放出來(lái)給小伙伴們，有需要的直接拿走，別跟我客氣^_^
2014-11-11
基于jQuery實(shí)現(xiàn)淡入淡出效果輪播圖
這篇文章主要為大家詳細(xì)介紹了基于jQuery淡入淡出效果輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
Struts2的s:radio標(biāo)簽使用及用jquery添加change事件
用到Struts2的s:radio標(biāo)簽時(shí)想給它添加一個(gè)change事件，由于此標(biāo)簽為頁(yè)面自動(dòng)生成一個(gè)radio組，不可以像正常那樣控制，于是想到用jquery來(lái)實(shí)現(xiàn)
2013-04-04
jquery如何實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)
實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)的方法有很多，在接下來(lái)的文章中為大家介紹下，jquery是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)
2013-12-12
jQuery實(shí)現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果,涉及jQuery數(shù)值運(yùn)算與頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
jQuery簡(jiǎn)單操作cookie的插件實(shí)例
這篇文章主要介紹了jQuery簡(jiǎn)單操作cookie的插件,以實(shí)例形式分析了jQuery操作cookie的插件功能定義與使用技巧,需要的朋友可以參考下
2016-01-01
JQuery中使文本框獲得焦點(diǎn)的方法實(shí)例分析
這篇文章主要介紹了JQuery中使文本框獲得焦點(diǎn)的方法,實(shí)例分析了jQuery針對(duì)文本框獲得焦點(diǎn)的技巧,需要的朋友可以參考下
2015-02-02