分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
我写文章的风格就是喜欢在开头讲问题法伤的背景：
因为最近要做个操作选项的呼出，然后就想到了用默认隐藏，鼠标划过的时候显示的方法。
刚开始打算添加一个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的设想）。
以上所述是脚本之家小编给大家分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug，希望对大家今后的工作学习有所帮助。
相关文章
在前台的表格中单击单元格便可修改其中的内容，回车键保存修改的内容，esc撤销保存的内容2014-05-05
本文实例讲述了jQuery实现时尚漂亮的幻灯片特效，基本能满足你在网页上使用幻灯片(焦点图)效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现 , firefox、google chrome等表示对其支持 , 唯独IE不支持2014-08-08
这篇文章主要介绍了JQuery动画与特效的用法,实例分析了显示与隐藏、滑动、淡入淡出及自定义动画的使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了浅析jQuery Ajax请求参数和返回数据的处理的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了jQuery实现模糊查询的方法,结合实例形式分析了jQuery事件响应、节点遍历、查询匹配、属性修改等相关操作技巧,需要的朋友可以参考下2018-05-05
这几天在学习jQuery插件的写法，搜索了一些资料，包括jQuery官方的示例，但发现描述的并不是很清晰。最后，终于搜索到一篇讲解比较清晰的文章，这里自己总结了一下，并以一个具体的示例来说明jQuery插件的写法2013-06-06
经常会遇到这样的情况，当页面展示内容过长时，想点导航切换栏目，就得把滚动条拉回到顶上，这样操作总不太人性化，能不能让导航超出显示范围外时自动贴在屏幕最顶上呢？答案肯定是能的。如果不太明白，把滚动条拉到下面点，看下我博客是效果就明白了。2011-09-09
第一次用JSON作为jquery异步请求的传输对象，结果在jquery请求后返回的结果是字符串还是json对象上折腾了半天。2011-04-04
最新评论