分享有关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，希望对大家今后的工作学习有所帮助。
相关推荐
-
jQuery插件animateSlide制作多点滑动幻灯片
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片--全屏动画animateSlide(代码完全原创). 直接上代码,把html.css和jquery代码copy到页面上即可呈现完美画面. html代码如下: <div class="animateSlide"> <div class="animateSlideImgWrap"> <div class=&quo
-
jQuery中animate动画第二次点击事件没反应
用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,
-
jQuery中使用animate自定义动画的方法
动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别. $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) 显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画. 语法: 1 .animate( properties [, duration ]
-
基于jquery animate操作css样式属性小结
昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi
-
jquery使用animate方法实现控制元素移动
本文实例讲述了jquery使用animate方法实现控制元素移动.分享给大家供大家参考.具体分析如下: 通过jquery的animate方法控制元素移动,这里需要将元素的位置定义为relative, fixed, 或者 absolute! <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(docume
-
深入理解jquery自定义动画animate()
在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行.但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash.这里 说的取代是网页特效部分,而不是动画.网页特效比如:渐变菜单.渐进显示.图片轮播等:而动画比如:故事情节广告.MV 等等. 如果复制当前代码进行在本地测试的时候,请注意把不需要(其他功能展示)的代码注释掉. <!DOCTYPE html> <html xmlns="http://www.w3.org/1
-
jQuery中animate的几种用法与注意事项
一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画 用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;
-
jQuery animate easing使用方法图文详解
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: • properties:一组包含作为动画属性和终值的样式属性和及其值的集合 • duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:100
-
js实现类似jquery里animate动画效果的方法
本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio
-
jQuery实现立体式数字动态增加（animate方法）
1.HTML结构 <div class="integral">已有<span class="ii"></span>积分</div> 2.js <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src
-
jQuery的animate函数实现图文切换动画效果
在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程. <div class="wrap"> <img src="images/s1.jpg" alt="photo" /> <div class="cover"> <h3>强震摧毁加勒比海小国海地</h3> <