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动画连续触发、滞后反复执行解决办法的更多相关文章

  1. 【转载】jQuery动画连续触发、滞后反复执行解决办法

    转载: http://www.cnblogs.com/yuejin/archive/2012/12/18/2822595.html jQuery中slideUp .slideDown.animate等 ...

  2. MyEclipse的JQuery.min.js报错红叉解决办法

    MyEclipse的JQuery.min.js报错红叉解决办法 1.选中报错的jquery文件"jquery-1.2.6.min.js".2.右键选择 MyEclipse--> ...

  3. 关于jQuery中,animate、slide、fade等动画的连续触发、滞后反复执行的bug的个人解决办法

    照例,现在开头讲个这个问题发生的背景吧: 因为最近要做个操作选项的呼出,然后就想到了用默认隐藏,鼠标划过的时候显示的方法. 刚开始打算添加一个class="active",直接触发 ...

  4. jQuery事件委托之Safari失效的解决办法--摘抄

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...

  5. 使用clearInterval清除计时循环时,最后一次循环还是会执行解决办法

    原代码: var interv=setInterval(function(){ alert("setInterval执行"); },2000) clearInterval(inte ...

  6. SVN cleanup操作反复失败解决办法

    今天在更新项目的时候遇到一个问题,按惯例要cleanup才能重新更新.但是很不幸,在cleanup的时候又遇到了问题! 1    svn cleanup failed–previous operati ...

  7. 最新版jQuery v3.3.1的BUG以及解决办法(什么问题不重要,怎么解决问题才重要)

    发现问题 最新版的 FineUIPro v5.2.0 中,我们将内置的 jQuery v1.12.4 升级到 jQuery v3.3.1 ,可以看升级记录: +升级到jQuery v3.3.1.    ...

  8. input输入框file类型第二次不触发onchange事件的解决办法,简单有效

    在网上看了很多办法,现在将网上大部分说法总结如下: 网上说法: 原因:选择一次后onchange事件没有绑定到input标签上:    解决办法:拷贝一份input标签的副本,每次选择后对原input ...

  9. layui动态添加的元素click等事件触发不了的解决办法

    在页面加载完成时候 '.add_project' 元素是可以触发click时间的,当动态添加 '.add_project' 时候,新添加的元素却触发不了click事件,类似下面的写法: $(" ...

随机推荐

  1. DuiLib 源码分析之CDuiString

    duilib是一个比较常见的界面库,闲来无事看看别人写的代码,跟自己写的一比, 才看到了差距呀,感觉自己写的乱七八糟,keep moving CduiString是duilib提供的一个字符串类,功能 ...

  2. 远程连接mysql数据库时报错: 错误代码 2003不能连接到MySQL服务器在*.*.*.*(111)

    在测试服务器上安装完mysql后, 服务器自己访问没有问题, 但是本地通过sql客户端连接时报错: 错误代码 2003不能连接到MySQL服务器在*.*.*.*(111).在网上查了一些资料,解决方案 ...

  3. onInterceptTouchEvent / onTouchEvent响应事件的详析

    onInterceptTouchEvent(),onTouchEvent() 默认返回false 注:事件分发机制是由 dispatchTouchEvent() 开始分发的 onInterceptTo ...

  4. ToolBar 修改边距

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android ...

  5. [分享] 封装工具ES4配置文件解释

    [分享] 封装工具ES4配置文件解释 LiQiang 发表于 2015-2-3 14:41:21 https://www.itsk.com/thread-346132-1-4.html [分享] 封装 ...

  6. 【腾讯云的1001种玩法】在腾讯云上创建您的SQL Cluster(5)

    版权声明:本文由李斯达 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/97264001482830465 来源:腾云阁 h ...

  7. i.Windows下APR安装过程

    1.下载安装native Windows下的APR安装和配置比较简单,可以直接下载Tomcat-native的二进制的版本包: 下载之后的目录结构为: tcnative-1.dll这个库已经包含了AP ...

  8. Sprint3总结和成员个人总结

    Sprint3总结 一.类名:软件工程-第三阶段 二.时间:至12.18 三.选题内容:web版-餐厅到店点餐系统 四.(1)团队博客地址: http://www.cnblogs.com/queenj ...

  9. 小小border用处多

    1.实现梯形 利用边框我们可以得到梯形,首先我们给一个div添加边框,当给边框设置四个不同的颜色时,我们可以得到这样的样式,可以看到这里上边框是一个梯形,那么如果我们给其他边框设置颜色为透明(tran ...

  10. 强大的命令行工具wmic

    1.wmic=Microsoft Windows Management Instrumentation 2. C:\WINDOWS\system32\wbem 下的东西,特别是.xsl格式化文件,实现 ...