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

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

刚开始打算添加一个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. lintcode ：Trailing Zeros 尾部的零

    题目: 尾部的零 设计一个算法,计算出n阶乘中尾部零的个数 样例 11! = 39916800,因此应该返回 2 挑战 O(logN)的时间复杂度 解题: 常用方法: 也许你在编程之美中看到,通过求能 ...

  2. dubbo与zookeeper安装手册

    原文 示例提供者安装 (+) (#) 安装: wget http://code.alibabatech.com/mvn/releases/com/alibaba/dubbo-demo-provider ...

  3. SpringMVC,MyBatis商品的增删改查

    一.需求 商品的增删改查 二.工程结构 三.代码 1.Mapper层 (1) ItemsMapperCustom.java package com.tony.ssm.mapper; import ja ...

  4. 创业草堂之二十二：创业公司C类官员的职位说明书

    麻雀虽小,五脏俱全. 创业公司启航,三五十来个人.七八条枪,其中“C”字开头的官儿还真少不了 – CEO.CTO.COO.CFO.CMO.CIO.CCO.CLO.Chairman/Chairwoman ...

  5. QTP之delphi试用感想一（自动化测试）

    这两天一直在琢磨自动化测试,自动化测试,其实与单元测试有一些相同之处,单元测试的目的也是可以一次写,多次运行,对于测试驱动及后期维护真是有非常多的好处,用自动化测试工具也是如何,主要目的是为了回归测试 ...

  6. java：IO-读写大文件

    import java.io.*; class Test { public static void main(String args[]){ FileInputStream fin =null; Fi ...

  7. 嵌入式控制(0)----linux系统网络配置

    嵌入式系统本身具有操作系统的全部属性,但收到其硬件条件制约,故需要主机通过串口/网口等方式与其通信.今日下午的工作主要是linux系统的ssh传输配置,nfs服务器配置,tftp服务器配置. ip的概 ...

  8. opencv 画延长线

    hough变换可以让我们检测到直线,这在前面已有详解,对于车道检测,我们需要其到图像边界的延长线一遍之后数据帧分析. 以下代码帮助我们在opencv中画延长线,本来想用虚线表示延长线的,无奈参数调不好 ...

  9. ubuntu13.04下载android4.0.1源码过程

    最初我参考的是老罗的博客http://blog.csdn.net/luoshengyang/article/details/6559955 进行下载安装的,但弄着弄着就发现不太对劲了.这里记录下详细过 ...

  10. selvert的过滤器filter处理中文乱码

    注意问题:在学习用selvert的过滤器filter处理中文乱码时,在filter配置初始化时用了utf-8处理中文乱码,而在提交的jsp页面中却用了gbk.虽然两种都可以出来中文乱码,但是却造成了处 ...