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 写类方式之十
Jul 05 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
如何提高数据访问速度
Dec 26 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
js实现简单选项卡功能
Mar 23 Javascript
微信小程序实现单选选项卡切换效果
Jun 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
人族 Terran 基本策略
2020/03/14 星际争霸
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Tensorflow 实现释放内存
2020/02/03 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
详解MindSpore自定义模型损失函数
2021/06/30 Python
python常见的占位符总结及用法
2021/07/02 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers