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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php查询whois信息的方法
2015/06/08 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
javascript基本语法
2016/05/31 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
nodejs基础应用
2017/02/03 NodeJs
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
解析Python中的__getitem__专有方法
2016/06/27 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python Process多进程实现过程
2019/10/22 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
董事长岗位职责
2013/11/30 职场文书
考试没考好检讨书
2014/01/31 职场文书
高中物理教学反思
2014/02/08 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技