一個小細節。

 1 $(function(){
 2     $("#sideBar>li").mouseover(function(){
 3         $(this).find("div").css(‘margin-left‘,‘80px‘);
 4         $(this).children("ul").stop(true,true).slideDown(400);
 5     });
 6     $("#sideBar>li").mouseleave(function(){
 7         $(this).find("div").css(‘margin-left‘,‘0px‘);
 
 8         $(this).children("ul").stop(true,true).slideUp(400);
 9     });
10 })

因為鼠標進入和離開都是結束並立即完成動畫，所以有些操作會發生下面抽搐的情況。。

解決：

 1 $(function(){
 2     $("#sideBar>li").mouseover(function(){
 3         $(this).find("div").css(‘margin-left‘,‘80px‘);
 4         $(this).children("ul").stop(true,true).slideDown(400);
 
 5     });
 6     $("#sideBar>li").mouseleave(function(){
 7         $(this).find("div").css(‘margin-left‘,‘0px‘);
 8         $(this).children("ul").stop(true).slideUp(400);
 9     });
10 })

將離開的動畫設置為不需要完成。

jQuery stop()