关于js动画执行队列的探究

关于js动画的执行顺序

最近做的一个项目后台出现了这样一个问题

当鼠标进入菜单模块后迅速出去，会出现一个这样的问题

菜单全部显示出来，并没有隐藏，这里原本做了一个动画效果，即在鼠标移进菜单的栏目中时，对应的子栏目菜单将会执行JQ动画fadeIn()淡出效果，

当鼠标移出去的时候，则执行效果hide()，隐藏相应子栏目菜单

执行以上的操作时，有4个事件触发，正常的逻辑是

进：触发fadeIn()函数，显示子栏目菜单

出：触发hide()函数，隐藏子栏目菜单

进：触发fadeIn()函数，显示子栏目菜单

出：触发hide()函数，隐藏子栏目菜单

最终的结果是隐藏所有的子栏目菜单

可现在的结果是，所有的子栏目菜单都显示出来，项目出现这个bug，就花了点时间研究并修复，最后研究出来是由于当初开发人员没有注意到js动画的执行机制

js的动画执行是需要有一个执行时间，而当一个动画还没执行结束时，另一个动画就触发了（动画针对同一个对象元素），这时，后触发的动画便会排在前一个动画之后，

等前一个动画执行完成再执行，而js的其它函数方法并没有遵循这个规律，只要触发到便立刻执行，所以造成了以下的执行结果：

进：触发fadeIn()函数，执行动画显示子栏目菜单

出：触发hide()函数，马上执行，隐藏子栏目菜单

进：触发fadeIn()函数，由于两次进出的速度过快，第一次进入触发的fadeIn()动画还没执行结束，所以这次fadeIn()排在后面等待执行

出：触发hide()函数，马上执行，隐藏子栏目菜单，注意，这里由于速度过快，第一次动画还没结束便触发了这个hide()，则马上执行，等hide()执行完后

　　　　第一次动画也执行完，则开始第二次动画执行，所以这里最后运行的是fadeIn()函数，结果子栏目菜单显示

上面讲解了问题的根源，接下来讲下解决方案：

解决方案是应用了stop()函数，这个函数可以停止指定元素当前正在执行的动画，从而终止动画的执行时间而按正常时间顺序执行函数

$(document).stop().fadeIn();

指定元素先停止当前执行动画再执行第二个动画

优化：由于停止动画当前元素的opacity属性会中断，造成达不到满值，所以下次执行fadeIn时显示到当前透明值会出现透明，所以在停止动画后加一个方法

$(document).stop().css("opacity","1").hide();

解决问题

 

博客：http://www.cnblogs.com/alex-web/

注：小疯纸的yy

转载于:https://www.cnblogs.com/alex-web/p/4988460.html