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 arguments.callee的应用代码
May 07 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
面向对象的javascript(笔记)
Oct 06 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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 表单验证实现代码
2009/03/10 PHP
php从字符串创建函数的方法
2015/03/16 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
详解python中的文件与目录操作
2017/07/11 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python与R语言的简要对比
2017/11/14 Python
你真的了解Python的random模块吗?
2017/12/12 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
vue实现倒计时功能
2021/03/24 Vue.js
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
中国梦读书活动总结
2014/07/10 职场文书
科技工作者先进事迹
2014/08/16 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL