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. iOS - Push 通知推送

    1.UserNotifications 通知是 App 用来和用户交流的一种方式,特别是当 App 并没有在前台运行的时候.通知,正如它的名称所强调的,被用作向用户'通知'一个事件,或者仅仅向用户提示 ...

  2. String.getBytes()

    package entity; import java.io.UnsupportedEncodingException; public class Test { public static void ...

  3. laravel select 传参

    传值: $params['select'] = 'taobao_id,title,image,price,coupon_deduct,coupon_condition'; 接受参数 $result = ...

  4. 使用SQL语句查询每张表的column name

    exec sp_columns tableName 上面这行代码可以查出该表所有的column,改为sp_pkeys,可以查出该表的主键.但是我如果想只查出column name,select COL ...

  5. Android文件存储

    文件存储是Android中最基本的一种数据存储方式,它不读存储的内容进行任何的格式化处理,所有数据原封不动的保存在文件之中.如果想用文件存储的方式保存一些较为复杂的数据,就需要定义一套自己的格式规范, ...

  6. 从github获取代码

    以duilib为例: 1 建立一个文件夹,右键 git bash here. 2 git init 3 git clone https://github.com/duilib/duilib.git

  7. 使用powershell为物理网卡添加多个IP地址

    因特殊要求,需要给某物理网卡添加多个IP地址: powershell中有个netsh的命令,添加IPv4地址的方法: add address [name=]<字符串>       [[ad ...

  8. Java 文本文件 读写

    Use File/FileInputStream/FileOutputStream. public void testWithFIS() throws IOException{ File file=n ...

  9. HashMap多线程并发问题分析

    转载: HashMap多线程并发问题分析 并发问题的症状 多线程put后可能导致get死循环 从前我们的Java代码因为一些原因使用了HashMap这个东西,但是当时的程序是单线程的,一切都没有问题. ...

  10. 几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...