jQuery動(dòng)畫(huà)出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法
本文實(shí)例講述了jQuery動(dòng)畫(huà)出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法。分享給大家供大家參考。具體分析如下:
jQuery中slideUp 、slideDown、animate等動(dòng)畫(huà)運(yùn)用時(shí),如果目標(biāo)元素是被外部事件驅(qū)動(dòng), 當(dāng)鼠標(biāo)快速地連續(xù)觸發(fā)外部元素事件, 動(dòng)畫(huà)會(huì)滯后的反復(fù)執(zhí)行,其表現(xiàn)不雅。
則解決辦法:
1、在觸發(fā)元素上的事件設(shè)置為延遲處理, 即可避免滯后反復(fù)執(zhí)行的問(wèn)題(使用setTimeout)
2、在觸發(fā)元素的事件時(shí)預(yù)先停止所有的動(dòng)畫(huà),再執(zhí)行相應(yīng)的動(dòng)畫(huà)事件(使用stop)
jquery stop:
$("#div").stop();//停止當(dāng)前動(dòng)畫(huà),繼續(xù)下一個(gè)動(dòng)畫(huà)
$("#div").stop(true);//清除元素的所有動(dòng)畫(huà)
$("#div").stop(false, true);//讓當(dāng)前動(dòng)畫(huà)直接到達(dá)末狀態(tài) ,繼續(xù)下一個(gè)動(dòng)畫(huà)
$("#div").stop(true, true);//清除元素的所有動(dòng)畫(huà),讓當(dāng)前動(dòng)畫(huà)直接到達(dá)末狀態(tài)
這里推薦使用第二種方法:
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- 詳解jQuery停止動(dòng)畫(huà)——stop()方法的使用
- JQuery動(dòng)畫(huà)和停止動(dòng)畫(huà)實(shí)例代碼
- jQuery動(dòng)畫(huà)animate方法使用介紹
- jQuery動(dòng)畫(huà)效果animate和scrollTop結(jié)合使用實(shí)例
- jquery animate 動(dòng)畫(huà)效果使用說(shuō)明
- JQuery動(dòng)畫(huà)animate的stop方法使用詳解
- jQuery實(shí)現(xiàn)切換頁(yè)面過(guò)渡動(dòng)畫(huà)效果
- Jquery中使用show()與hide()方法動(dòng)畫(huà)顯示和隱藏圖片
- jQuery動(dòng)畫(huà)與特效詳解
- 利用jquery制作滾動(dòng)到指定位置觸發(fā)動(dòng)畫(huà)
- jQuery 動(dòng)畫(huà)與停止動(dòng)畫(huà)效果實(shí)例詳解
相關(guān)文章
jquery中attr、prop、data區(qū)別與用法分析
這篇文章主要介紹了jquery中attr、prop、data區(qū)別與用法,結(jié)合實(shí)例形式分析了jQuery中attr、prop、data的區(qū)別、功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-09-09Jquery實(shí)現(xiàn)彈性滑塊滑動(dòng)選擇數(shù)值插件
有時(shí)我們?cè)陧?yè)面上需要選擇數(shù)值范圍,如購(gòu)物時(shí)選取價(jià)格區(qū)間,購(gòu)買(mǎi)主機(jī)時(shí)自主選取CPU,內(nèi)存大小配置等,使用直觀的滑塊條直接選取想要的數(shù)值大小即可,無(wú)需手動(dòng)輸入數(shù)值,操作簡(jiǎn)單又方便。2015-08-08jquery中dom操作和事件的實(shí)例學(xué)習(xí) 下拉框應(yīng)用
jquery中dom操作和事件的實(shí)例學(xué)習(xí) 下拉框應(yīng)用實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-12-12javascript右下角彈層及自動(dòng)隱藏(自己編寫(xiě))
需要有個(gè)右下角彈層提示公告的,下面分享早些時(shí)候自己編寫(xiě),以及現(xiàn)在還在應(yīng)用的自動(dòng)彈層,需要的朋友可以參考下2013-11-11jQuery為動(dòng)態(tài)生成的select元素添加事件的方法
下面小編就為大家?guī)?lái)一篇jQuery為動(dòng)態(tài)生成的select元素添加事件的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08使用jquery局部刷新(jquery.load)從數(shù)據(jù)庫(kù)取出數(shù)據(jù)
jquery提供了很好的ajax交互,我這里用的是直接返回字符串,用的是jquery.load方法從數(shù)據(jù)庫(kù)取出的數(shù)據(jù)2014-01-01jQuery多級(jí)聯(lián)動(dòng)下拉插件chained用法示例
這篇文章主要介紹了jQuery多級(jí)聯(lián)動(dòng)下拉插件chained用法,結(jié)合實(shí)例形式分析了jQuery多級(jí)聯(lián)動(dòng)下拉插件chained的功能與基本使用技巧,需要的朋友可以參考下2016-08-08JQuery EasyUI 結(jié)合ztrIee的后臺(tái)頁(yè)面開(kāi)發(fā)實(shí)例
下面小編就為大家?guī)?lái)一篇JQuery EasyUI 結(jié)合ztrIee的后臺(tái)頁(yè)面開(kāi)發(fā)實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09jquery getScript動(dòng)態(tài)加載JS方法改進(jìn)詳解
有許多朋友需要使用getScript方法動(dòng)態(tài)加載JS,本文將詳細(xì)介紹此功能的實(shí)現(xiàn)方法2012-11-11