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

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

刚开始打算添加一个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. JAX-RS 2.0 REST客户端编程实例

    JAX-RS 2.0 REST客户端编程实例 2014/01/28 | 分类: 基础技术, 教程 | 0 条评论 | 标签: JAX-RS, RESTFUL 分享到:3 本文由 ImportNew - ...

  2. MVC5中Model层开发数据注解

    ASP.NET MVC5中Model层开发,使用的数据注解有三个作用: 数据映射(把Model层的类用EntityFramework映射成对应的表) 数据验证(在服务器端和客户端验证数据的有效性) 数 ...

  3. Intellij IDEA创建javaWeb以及Servlet简单实现

    1.创建web工程 File --> New --> Project...

  4. php库Faker

    Faker License : MIT Source Code Allo点评:Faker是一个很神奇的项目,会自动生成拟真的数据,包括用户资料.长文本.IP.日期等等,在网站上线前测试时非常好用. g ...

  5. 整理了一份招PHP高级工程师的面试题

    1. 基本知识点 HTTP协议中几个状态码的含义:1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码   说明 100   (继续) 请求者应当继续提出请求. 服务器返回此代码 ...

  6. (2)WinForm中改变Tab选项卡的顺序

    Tab选项卡选中,在其属性中找到TabPages这个属性.点进去,可以通过上下移动标签卡改变标签卡的顺序.

  7. Burnside引理和polay计数学习小记

    在组合数学中有这样一类问题,比如用红蓝两种颜色对2*2的格子染色,旋转后相同的算作一种.有多少种不同的染色方案?我们列举出,那么一共有16种.但是我们发现,3,4,5,6是同一种,7,8,9,10是用 ...

  8. windows和mac下分别配置虚拟主机

    windows下配置 1.找到apache的配置文件,httpd.conf 2.找到 LoadModule rewrite_module modules/mod_rewrite.so 去掉前边的# 3 ...

  9. RecyclerView 结合 CardView 使用（二）

    上一篇的基础上,修改了,CardView的布局和点击效果 总结: CardView的奇葩属性 :app:cardPreventCornerOverlap="false" 和园角边框 ...

  10. Android-Universal-Image-Loader

    基本以后都不用了,所以自己就不总结了 http://www.cnblogs.com/kissazi2/p/3886563.html http://www.cnblogs.com/kissazi2/p/ ...