照例，现在开头讲个这个问题发生的背景吧：

因为最近要做个操作选项的呼出，然后就想到了用默认隐藏，鼠标划过的时候显示的方法。

刚开始打算添加一个class="active"，直接触发mouseover（或者mouseenter）的时候add，mouseout（或者mouseleave）的时候remove，这个解决方法很简单，也很实用，但是体验上可能不是那么酷炫（好吧，这个词用的，瞬间感觉好low啊），所以就想到了用animate或者slide这些jQuery的动画，然后一开始讲真，这个插件自己写，会碰到些问题，不太好实现（毕竟js掌握的不是很到位），然后听同事讲去找找jquery，导入后直接引用就可以了。

（还好我没养成一碰到要做某个特效，第一反应是网上找插件，说起这个，又想到前几天碰到的关于将table中的表头对界面滚动而固定的那个解决方法了，过几天传上来，讲真，那个方法网上找了一圈没找到合适的解决方法，最后我自己想了个方法，还是蛮有成绩感的，虽然有可能不是最优的解决方案）

回到正题，网上找了一圈，讲真，别人的插件，做的确实很赞，而且各种浏览器下的兼容性也解决了，不过我个人而言，只在两三个页面用到，而且又要导入文件（这个好像不是特别麻烦），又要用别人的，终归没什么成就感。

然后，最后还是自己动手写了，虽然花了点时间，也碰到了一些问题，不过还是不错的，问题也最后解决了，至少对几个jQuery的内置函数又熟悉了一点。

ps:最后补充一句，在我自己找出解决方案后，再次百度了一下，好吧，出来的第一个网页链接，点进去就是我所用的方法。

bug重现：原本想做个动图的，好像太麻烦了，还是上代码吧，知道这个问题的应该不用看动图也知道是个怎么样的问题；不知道这个问题的，可以先把代码拷贝下来试一下。

PS：下面以animate动画为例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <title>test</title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">

    <script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script>

    <script src="./bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

    <div style="width:70%;margin:50px auto;height:300px;">

        <div id="test" style="width:900px;height:100px;border:1px solid red;overflow:hidden;">

            <div class="test" style="margin-left:-6em">

                <a>

                    测试用的文字

                    <i class="fa fa-arrow-right"></i>

                </a>

            </div>

        </div>

    </div>

    <script>

        $("[data-toggle='tooltip']").tooltip();

        $("#test").on("mouseover",function(){

            var $this = $(this);

            var $thisTest = $this.find("div.test");

            $thisTest.css("position","relative");

            // $thisTest.stop();

            $thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});

        })

        .on("mouseout",function(){

            var $this = $(this);

            var $thisTest = $this.find("div.test");

            $thisTest.css("position","relative");

            // $thisTest.stop();

            $thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});

        })

        //连续触发动画bug

        //不允许动画累积；或是在新的动画开始前，先停止当前正在进行的动画

    </script>

</body>

</html>

上面这份代码，stop()这个方法被我注释掉了，是我个人认为最完美的解决方法，没有被注释掉的，是我后来百度了一下后，别人提到的另一种解决方案，但我个人感觉不是特别完美，至于差别我在后面提。

最开始，

$thisTest.filter(':not(:animated)').animate({marginLeft:"0em"});
 $thisTest.filter(':not(:animated)').animate({marginLeft:"-6em"});

这两句代码，是没有filter()函数的，也就是最开始碰到这个bug的时候的代码的样子。

这个bug产生原因就是事件在短时间内（上一个动画未播放完），动画累积导致的（估计碰到这个问题的，回过头去看看代码都知道这个原因）。所以，解决的方法，有两个。

【filter】

一个就是用filter过滤，在动画发生前，过滤掉正在进行动画的元素，只让上一个动画已经结束的元素才能触发新的事件。

然后这就带来一个新问题了，当我把鼠标移至对应的内容上，mouseover事件触发，这个时候，在动画还未结束的时候，我再将鼠标移除对应内容区域外，mouseleave事件触发，但是因为上一个动画还未结束，所以即使触发了该事件，但预期的函数并未执行，此时预期中的“mouseleave事件触发，内容隐藏”结果便无法做到了。

当然，如果操作者在mouseover事件触发的动画结束前，鼠标一直停在对应内容上，这个方案并不会有影响。

【stop】

对于stop()，虽然知道这是大家都了解的，还是再搬一遍吧。

//语法结构

$("#div").stop();//停止当前动画，继续下一个动画

$("#div").stop(true);//清除元素的所有动画

$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画

$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

这个方案的思路，就是简单的：当我mouseover的时候，触发对应的动画，但是在动画还未结束的时候，我却要mouseleave，同时触发mouseleave对应的动画，这个时候我便需要停止对应元素正在进行的动画。然后，这个bug也就不存在了。

最后，好吧，这篇随笔好像也没啥总结的，其实就是对animate、slide、fade动画函数的熟悉吧，同时再熟悉一下stop有参数无参数的区别（讲真，刚开始没想到用stop，过了一两天后，偶然看到API的时候，看到了stop，才突然有了用stop解决这个bug的设想）。

PS：其实最无语的是，为什么刚开始的没有在百度找到呢（只怪自己一开始没输对关键字）。

关于jQuery中，animate、slide、fade等动画的连续触发、滞后反复执行的bug的个人解决办法的更多相关文章

  1. jquery中load()加载页面，刷新之后，加载的页面不显示的解决办法

    <script language="javascript" type="text/javascript"> $(function(){ $(&quo ...

  2. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  3. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  4. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  5. jQuery中animate()的方法以及$(&quot;body&quot;).animate({&quot;scrollTop&quot;:top})不被Firefox支持问题的解决

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...

  6. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

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

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

  8. jQuery动画连续触发、滞后反复执行解决办法

    jQuery中slideUp .slideDown.animate等动画运用时,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,其表现不雅. 则解决办法: 1 ...

  9. SecureCRT SSH Linux中不显示彩色 字体颜色、文件夹和文件显示的颜色区别开解决办法

    SecureCRT SSH Linux中不显示彩色 字体颜色.文件夹和文件显示的颜色区别开解决办法 实验环境: 刚开始我的情况是这样的:带颜色的显示不出来,然后还能看到,此处有内容,猜测是Secure ...

随机推荐

  1. 老韩思考：一个卖豆腐的能转行IT吗? 你的卖点在哪里?

    前言: 我带过的学生很多,各行各业都有,泰牛程序员招生消息放出去后,还有一个在菜市场上卖豆腐的也看我的视频教程,决定转换IT行业,我想,北大毕业的可以卖猪肉,那么卖豆腐的为什么就不能从事IT行业呢?那 ...

  2. Sina App Engine(SAE)入门教程(7)- Storage使用

    参考阅读 sae storage api 文档 Storage 说明文档 Storage 大文件上传说明 storage是什么? 因为sae禁用了代码环境的本地读写,但是在网站运行的过程中,必定会出现 ...

  3. 英特尔Intel

    公司名称 英特尔(集成电路公司)Intel Corporation(Integrated Electronics Corporation) 英特尔公司是全球最大的半导体芯片制造商,它成立于1968年, ...

  4. POJ2891——Strange Way to Express Integers(模线性方程组)

    Strange Way to Express Integers DescriptionElina is reading a book written by Rujia Liu, which intro ...

  5. Android TextView多行文本滚动实现

    Android中我们为了实现文本的滚动可以在ScrollView中嵌入一个TextView,其实TextView自己也可以实现多行滚动的,毕竟ScrollView必须只能有一个直接的子类布局.只要在l ...

  6. C#实现Comparable接口实现排序

    C#中,实现排序的方法有两种,即实现Comparable或Comparer接口,下面简单介绍实现Comparable接口实现排序功能. 实现Comparable接口需要实现CompareTo(obje ...

  7. apk反编译(4)Smali代码注入

    转自 : http://blog.sina.com.cn/s/blog_5674d18801019i89.html 应用场景 Smali代码注入只能应对函数级别的移植,对于类级别的移植是无能为力的.具 ...

  8. 函数fsp_header_init

    /**********************************************************************//** Initializes the space he ...

  9. uva12034Race

    递推,组合. 考虑第一名有i个人,则f[n]=sum(C(n,i)*f[n-i]),递推即可.. #include<cstdio> #include<algorithm> #i ...

  10. Android之 学习路线

    第一阶段:Java面向对象编程 1.Java基本数据类型与表达式,分支循环.  2.String和StringBuffer的使用.正则表达式.  3.面向对象的抽象,封装,继承,多态,类与对象,对象初 ...