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控件的相对独立性
Sep 06 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
React组件refs的使用详解
Feb 09 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
安装APACHE
2007/01/15 PHP
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python 操作 MySQL数据库
2020/09/18 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
小车司机岗位职责
2013/11/25 职场文书
大专生自荐书范文
2014/06/22 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
Nginx 常用配置
2022/05/15 Servers
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python