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


Posted in Javascript onJanuary 10, 2016

我写文章的风格就是喜欢在开头讲问题法伤的背景:

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

刚开始打算添加一个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,希望对大家今后的工作学习有所帮助。

Javascript 相关文章推荐
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
AngularJS表单验证功能分析
May 26 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
js仿微信抢红包功能
Sep 25 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
理解Angular数据双向绑定
Jan 10 #Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 #Javascript
JavaScript电子时钟倒计时第二款
Jan 10 #Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 #Javascript
Node.js静态文件服务器改进版
Jan 10 #Javascript
实例讲解javascript注册事件处理函数
Jan 09 #Javascript
详解javascript事件冒泡
Jan 09 #Javascript
You might like
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
Vue基础配置讲解
2019/11/29 Javascript
Python全局变量用法实例分析
2016/07/19 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python编写Logistic逻辑回归
2020/12/30 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
django如何实现视图重定向
2019/07/24 Python
python实现拼图小游戏
2020/02/22 Python
django中ImageField的使用详解
2020/12/21 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
银行员工辞职信范文
2014/01/20 职场文书
春秋淹城导游词
2015/02/11 职场文书
锅炉工岗位职责
2015/02/13 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
《植树问题》教学反思
2016/03/03 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL