首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
Web开发
> 详细
用jQuery防止多次点击动画重复
时间:
2016-01-13 12:15:33
阅读:
168
评论:
0
收藏:
0
[点我收藏+]
标签:
用jQuery防止多次点击动画重复
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;//回到最初始状态,也是也表示这一轮动画执行完毕。
});
}
用jQuery防止多次点击动画重复
标签:
原文地址:http://www.cnblogs.com/wzzl/p/5126549.html
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论(
0
)
登录后才能评论!
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
更多
36.VUE — 认识 Webpack 和 安装
2021-07-28
【PHP】上传图片翻转问题
2021-07-28
php对数字进行万。亿的转化
2021-07-28
五个 .NET 性能小贴士
2021-07-28
Three.js中显示坐标轴、平面、球体、四方体
2021-07-28
.net 5+ 知新:【1】 .Net 5 基本概念和开发环境搭建
2021-07-27
1.html,css
2021-07-27
基于Docker搭建 Php-fpm + Nginx 环境
2021-07-27
nginx + http + svn
2021-07-27
kubernets kube-proxy的代理 iptables和ipvs
2021-07-26
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码!