jQuery stop()

標籤：設定   function   func   細節   deb   logs   動畫   margin   slide   

一個小細節。

 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()