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树形菜单
Dec 09 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
js调用设备摄像头的方法
Jul 19 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
wxPython中文教程入门实例
2014/06/09 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python lxml中etree的简单应用
2019/05/10 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
基于python3实现倒叙字符串
2020/02/18 Python
python中有帮助函数吗
2020/06/19 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
私人委托书格式
2014/09/10 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年管理工作总结
2014/11/22 职场文书
2015年党员承诺书
2015/01/21 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
日元符号 ¥
2022/02/17 杂记
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技