關於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