关于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/p/4988460.html