分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug

 更新时间:2016年01月10日 09:14:35   作者:Stan_今夕何夕  
这篇文章主要介绍了分享有关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遮罩层实现方法实例详解(附遮罩层插件)

    jQuery遮罩层实现方法实例详解(附遮罩层插件)

    这篇文章主要介绍了jQuery遮罩层实现方法,结合实例形式较为详细的分析了jQuery遮罩层样式及功能实现技巧,并附带分析了一个简单jQuery遮罩层插件实现方法,需要的朋友可以参考下
    2015-12-12
  • jquery密码强度校验

    jquery密码强度校验

    这篇文章主要介绍了jquery密码强度校验,这是一个非常常见的功能,在输入密码的时候提示密码的强度,本文使用jQuery来实现,有需要的小伙伴可以参考下。
    2015-12-12
  • jQuery的显示和隐藏方法与css隐藏的样式对比

    jQuery的显示和隐藏方法与css隐藏的样式对比

    display:none和visible:hidden都能把网页上某个元素隐藏起来,而jQuery的显示和隐藏又有哪些方法,在本文将为大家详细介绍下,感兴趣的朋友不要错过
    2013-10-10
  • jQuery晃动层特效实现方法

    jQuery晃动层特效实现方法

    这篇文章主要介绍了jQuery晃动层特效实现方法,实例分析了animate方法与css样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 利用JQuery实现datatables插件的增加和删除行功能

    利用JQuery实现datatables插件的增加和删除行功能

    这篇文章给大家介绍了jquery实现datatables插件的增加和删除行的功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-01-01
  • asp.net+jquery滚动滚动条加载数据的下拉控件

    asp.net+jquery滚动滚动条加载数据的下拉控件

    由于需求需要用到一个滚动滚动条加载数据的下拉列表(假如数据1000条,下拉列表开始只显示100条,当用户下拉滚到条到最底下时,再加载下一个100条,如此循环)
    2010-06-06
  • jQuery .tmpl(), .template()学习资料小结

    jQuery .tmpl(), .template()学习资料小结

    昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里。
    2011-07-07
  • Jquery AutoComplete自动完成 的使用方法实例

    Jquery AutoComplete自动完成 的使用方法实例

    jQuery的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de的JQuery Autocomplete plugin比较强大,我们就来写一些代码感受一下。
    2010-03-03
  • jquery+html仿翻页相册功能

    jquery+html仿翻页相册功能

    这篇文章主要为大家详细介绍了jquery+html仿翻页相册功能,前端实现的相册模仿功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jQuery.validate.js表单验证插件的使用代码详解

    jQuery.validate.js表单验证插件的使用代码详解

    Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,这篇文章主要介绍了jQuery.validate.js表单验证插件的使用代码详解,需要的朋友可以参考下
    2018-10-10

最新评论