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 css在IE和Firefox中区别分析
Feb 18 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
js实现鼠标点击飘爱心效果
Aug 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
PHP分页显示制作详细讲解
2006/12/05 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
繁简字转换功能
2006/07/19 Javascript
新页面打开实际尺寸的图片
2006/08/25 Javascript
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
javascript动画浅析
2012/08/30 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
简介JavaScript错误处理机制
2020/08/04 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python删除特定文件的方法
2015/07/30 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
如何写辞职书
2015/02/26 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
画展观后感
2015/06/17 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
vue特效之翻牌动画
2022/04/20 Vue.js