jquery problem mousenter & mouseleave

jquery script

 $(document).ready(function(){

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

       $("#sslider").show("slide", { direction: "left" }, 1000);
    }).bind(开发者_运维问答"mouseleave",function(){
        $("#sslider").hide("slide", { direction: "left" }, 1000);
        });
 });

html code:

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

i want the result when the mouse is over the grey box to make the sliding effect of #sslider from left to right, and when the mouse is out the #sslider to play reverse.

the problem is tha in firefox the script is buggy when the mouse is coming over the #slider before the sliding animation is over. any help

You can do this, it'll only animate if it's hidden/visible appropriately:

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

This uses .hover() (equivalent to mouseneter/mouseleave) to be a bit more concise. The main change is the selector, it'll only show if it's hidden, and hide if it's visible, it'll get rid of that loop caused by a slide left/right. Here's a quick demo of it working.