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动画连续触发、滞后反复执行解决办法的更多相关文章
- 【转载】jQuery动画连续触发、滞后反复执行解决办法
转载: http://www.cnblogs.com/yuejin/archive/2012/12/18/2822595.html jQuery中slideUp .slideDown.animate等 ...
- MyEclipse的JQuery.min.js报错红叉解决办法
MyEclipse的JQuery.min.js报错红叉解决办法 1.选中报错的jquery文件"jquery-1.2.6.min.js".2.右键选择 MyEclipse--> ...
- 关于jQuery中,animate、slide、fade等动画的连续触发、滞后反复执行的bug的个人解决办法
照例,现在开头讲个这个问题发生的背景吧: 因为最近要做个操作选项的呼出,然后就想到了用默认隐藏,鼠标划过的时候显示的方法. 刚开始打算添加一个class="active",直接触发 ...
- jQuery事件委托之Safari失效的解决办法--摘抄
什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...
- 使用clearInterval清除计时循环时,最后一次循环还是会执行解决办法
原代码: var interv=setInterval(function(){ alert("setInterval执行"); },2000) clearInterval(inte ...
- SVN cleanup操作反复失败解决办法
今天在更新项目的时候遇到一个问题,按惯例要cleanup才能重新更新.但是很不幸,在cleanup的时候又遇到了问题! 1 svn cleanup failed–previous operati ...
- 最新版jQuery v3.3.1的BUG以及解决办法(什么问题不重要,怎么解决问题才重要)
发现问题 最新版的 FineUIPro v5.2.0 中,我们将内置的 jQuery v1.12.4 升级到 jQuery v3.3.1 ,可以看升级记录: +升级到jQuery v3.3.1. ...
- input输入框file类型第二次不触发onchange事件的解决办法,简单有效
在网上看了很多办法,现在将网上大部分说法总结如下: 网上说法: 原因:选择一次后onchange事件没有绑定到input标签上: 解决办法:拷贝一份input标签的副本,每次选择后对原input ...
- layui动态添加的元素click等事件触发不了的解决办法
在页面加载完成时候 '.add_project' 元素是可以触发click时间的,当动态添加 '.add_project' 时候,新添加的元素却触发不了click事件,类似下面的写法: $(" ...
随机推荐
- Codeforces 722D. Generating Sets
D. Generating Sets time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- codeigniter nginx配置
转载:http://www.nginx.cn/1134.html server{ listen 80; server_name www.ci.oa.com; access_log /usr/local ...
- 根据标记清空页面中所有的input对象
function clear1(flag) { //获取页面中所有的input对象 var inputs = document.getElementsByTagName("input&quo ...
- linux中Makefile文件相关内容
第一章.概述什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional(专业)的程序员,m ...
- 深入理解js构造函数
JavaScript对象的创建方式 在JavaScript中,创建对象的方式包括两种:对象字面量和使用new表达式.对象字面量是一种灵活方便的书写方式,例如: ? 1 2 3 4 5 6 var o1 ...
- grunt不是内部或外部命令错误处理
如题, npm install -g grunt-cli发现grunt命令却不可用, 其实是环境变量问题,但是网上很多给出的方法其实是不准确的, 正确方法,可以通过npm root -g查看路径,之后 ...
- Groovy入门经典 随书重点
1 数值和表达式 1.1数值 整数是Integer类的实例 有小数部分的数值是BigDecimal类的实例 不同于java,没有基础数据类型 一切皆对象的概念重于java 1.2表达式 两个整数的除法 ...
- java selenium (九) 常见web UI 元素操作 及API使用
本篇介绍我们如何利用selenium 来操作各种页面元素 阅读目录 链接(link) <div> <p>链接 link</p> <a href=" ...
- ORACLE中的支持正则表达式的函数
ORACLE中的支持正则表达式的函数主要有下面四个:1,REGEXP_LIKE :与LIKE的功能相似2,REGEXP_INSTR :与INSTR的功能相似3,REGEXP_SUBSTR :与SUBS ...
- AngularJS-UI-Router
涉及知识点: $stateProvider,$urlRouteProvider ui-href $stateParams,$state 1.如何引用依赖angular-ui-router angula ...