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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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上的memcache和memcached两个pecl库
2010/03/29 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php获取操作系统语言代码
2013/11/04 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
js charAt的使用示例
2014/02/18 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
Prototype如何更新局部页面
2013/03/03 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
幼儿教师培训感言
2014/03/08 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
大学四年个人总结
2015/03/03 职场文书
高中班主任心得体会
2016/01/07 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS