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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
javascript arguments使用示例
2014/12/16 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
厨师岗位职责
2013/11/12 职场文书
简短大学毕业感言
2014/01/18 职场文书
税务干部鉴定材料
2014/02/11 职场文书
诉前财产保全担保书
2014/05/20 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
作弊检讨书范文
2015/05/06 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS