分享有关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,希望对大家今后的工作学习有所帮助。

(0)

相关推荐

  • 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动画第二次点击事件没反应

    用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,

  • 基于jquery animate操作css样式属性小结

    昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi

  • jQuery的animate函数实现图文切换动画效果

    在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程. <div class="wrap"> <img src="images/s1.jpg" alt="photo" /> <div class="cover"> <h3>强震摧毁加勒比海小国海地</h3> <

  • jQuery插件animateSlide制作多点滑动幻灯片

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片--全屏动画animateSlide(代码完全原创). 直接上代码,把html.css和jquery代码copy到页面上即可呈现完美画面. html代码如下: <div class="animateSlide"> <div class="animateSlideImgWrap"> <div class=&quo

  • 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()

    在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行.但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash.这里 说的取代是网页特效部分,而不是动画.网页特效比如:渐变菜单.渐进显示.图片轮播等:而动画比如:故事情节广告.MV 等等. 如果复制当前代码进行在本地测试的时候,请注意把不需要(其他功能展示)的代码注释掉. <!DOCTYPE html> <html xmlns="http://www.w3.org/1

  • jQuery中使用animate自定义动画的方法

    动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别. $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) 显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画. 语法: 1 .animate( properties [, duration ]

  • jQuery animate easing使用方法图文详解

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: • properties:一组包含作为动画属性和终值的样式属性和及其值的集合 • duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:100

  • jquery使用animate方法实现控制元素移动

    本文实例讲述了jquery使用animate方法实现控制元素移动.分享给大家供大家参考.具体分析如下: 通过jquery的animate方法控制元素移动,这里需要将元素的位置定义为relative, fixed, 或者 absolute! <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(docume

随机推荐