jQuery动画出现连续触发、滞后反复执行的解决方法


Posted in Javascript onJanuary 28, 2015

本文实例讲述了jQuery动画出现连续触发、滞后反复执行的解决方法。分享给大家供大家参考。具体分析如下:

jQuery中slideUp 、slideDown、animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅。

则解决办法:

1、在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题(使用setTimeout)

2、在触发元素的事件时预先停止所有的动画,再执行相应的动画事件(使用stop)

jquery stop:

//语法结构 

$("#div").stop();//停止当前动画,继续下一个动画 

$("#div").stop(true);//清除元素的所有动画 

$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画

$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态

这里推荐使用第二种方法:
$("#div").stop().animate({width:"100px"},100);

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
JS实现4位随机验证码
Oct 19 Javascript
Jquery 实现table样式的设定
Jan 28 #Javascript
Jquery 实现checkbox全选方法
Jan 28 #Javascript
AngularJS实现表单验证
Jan 28 #Javascript
jQuery制作简单柱状图实例
Jan 28 #Javascript
js分页工具实例
Jan 28 #Javascript
js制作简易年历完整实例
Jan 28 #Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 #Javascript
You might like
搜索引擎技术核心揭密
2006/10/09 PHP
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP中文汉字验证码
2007/04/08 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
javascript 函数式编程
2007/08/16 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
党支部三会一课计划
2014/09/24 职场文书
2014年保管员工作总结
2014/11/18 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏