亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

用jQuery動畫來做特效,怎么防止多次點擊動畫重復的問題?

標簽:
Html/CSS

1、在你的点击事件中加上一个判断,假设产生动画效果目标的是#aa这个节点,那么你要加上这个判断
if(!$("#aa").is(":animated")){

//执行你的操作
}

他会确保你的动画只会在上一个动画结束后才能产生 ,可以保持动画的完整性,但是连续点击时会有反映迟钝的感觉

2、$("#aa").stop(true,false).animate({...},1000);
这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画,会造成动画脱节不太美观,但是反应迅速
说到这里我们解释下stop()这个函数的用法。
stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。

stop在新版jQuery中添加了2个参数:
第一个参数的意思是是否清空动画序列,也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果,一般为false,跳过当前动画效果,执行下一个动画效果;
第二个参数是是否将当前动画效果执行到最后,意思就是停止当前动画的时候动画效果刚刚执行了一般,这个时候想要的是动画执行之后的效果,那么这个参数就为true。否则动画效果就会停在stop执行的时候

3、第三种方法应用就需要设置一个判断是否处于动画的标志,一般是一个点击事件执行N多个步骤的动画之后然后跳到下一个动画。

var flag = false;
function aa(){
if(flag) return;//这里指当这个标志flag为真的时候,直接返回,不执行当前的这个动画。

flag=true;//这里是在执行这个动画的最开始的时候把标志flag设置为真,在这个动画没执行完之前这个值一直为真,当下次运行这个函数的时候,由于flag值为真,也不会执行。必须等到这个函数执行完之后才会再次执行这个动画。
……………….
………………..
………………..
$(“#aa”).animated({“left”:”100″},1000,function(){
………………….
flag=false;//回到最初始状态,也是也表示这一轮动画执行完毕。
});
}

其他
在你的点击事件中加上一个判断 假设产生动画效果目标的是target,那么你要加上这个判断
if(!target.is(":animated")){}
他会确保你的动画只会在上一个动画结束后才能产生 ,可以保持动画的完整性,但是连续点击时会有反映迟钝的感觉
而$("#id").stop(true,false).animate({...},1000);这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画,会造成动画脱节不太美观,但是反应迅速
用哪个你看着办

點擊查看更多內容
1人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
37
獲贊與收藏
165

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消