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 / mouseleave）更简洁一点。主要的变化是选择器，它只显示它是否被隐藏，并隐藏它是否可见，它将摆脱由左/右滑动引起的循环。 Here's a quick demo of it working

jquery问题mouseenter和;鼠标离开

1 个答案: