jQuery的問題mousenter和鼠標離開

Question

jQuery腳本

$(document).ready(function(){ 

$("#allbox").bind("mouseenter",function(){ 

     $("#sslider").show("slide", { direction: "left" }, 1000); 
    }).bind("mouseleave",function(){ 
     $("#sslider").hide("slide", { direction: "left" }, 1000); 
     }); 
}); 

的html代碼：

<div id="allbox" style="width:400px; height:100px; background-color:#CCCCCC"> 


mymenu 
<div id="sslider" style="display:none; background-color:#FFFFFF; padding:5px; width:155px;"> 
link1<br>link2<br>link3<br>link4... 
</div></div> 

我想要的結果，當鼠標移動到灰色框，使#sslider的滑動效果從左正確，並且當鼠標移出#sslider時可以反向播放。

問題是在Firefox中的問題在滑動動畫結束之前，當鼠標滑過#slider時，腳本有問題。任何幫助

Answer 1

你可以做到這一點，如果它適當地隱藏/可見它只會動畫：

$(function(){ 
    $("#allbox").hover(function(){ 
     $("#sslider:hidden").show("slide", { direction: "left" }, 1000); 
    }, function(){ 
     $("#sslider:visible").hide("slide", { direction: "left" }, 1000); 
    }); 
});​ 

它使用.hover()（相當於mouseneter /鼠標離開）更簡潔一點。主要的變化是選擇器，它只會顯示它是否隱藏，如果它是可見的，將隱藏，它會擺脫由左/右滑動引起的循環。 Here's a quick demo of it working。