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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
json数据格式常见操作示例
Jun 13 Javascript
JS继承最简单的理解方式
Mar 31 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
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
json原理分析及实例介绍
2012/11/29 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
原生JS轮播图插件
2017/02/09 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
JavaScript模块详解
2017/12/18 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 专题三 字符串的基础知识
2017/03/19 Python
python 换位密码算法的实例详解
2017/07/19 Python
Django添加sitemap的方法示例
2018/08/06 Python
python把转列表为集合的方法
2019/06/28 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
python实现飞船大战
2020/04/24 Python
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
会计实习期自我鉴定
2013/10/06 职场文书
高中语文教学反思
2014/01/16 职场文书
元旦晚会邀请函
2014/02/01 职场文书
护士2014年终工作总结
2014/11/11 职场文书