jquery - jQuery mouseenter 的古怪之处 - mouseleave

Question

我试图在光标进入其父元素时为元素设置动画，并在鼠标退出元素时可靠地反转该动画 - 对于多层嵌套元素。我可以用 CSS 笨拙地做到这一点（过渡不是一个选项），但想用 jQuery 来让它性感起来；）

我试图实现的一个例子是这种类型的手风琴菜单，但正如我所说，使用 jQuery。

到目前为止，我已经尝试在同一个示例中使用 mouseenter 和 mouseleave，但在第一次扩展和收缩后似乎无法让它工作。

我怎样才能可靠而优雅地将此隐藏/显示动画绑定到 mouseenter/mouseleave 或 jQuery 中的类似内容？

Answer 1

看来工作

http://jsfiddle.net/sechou/Rce8A/2/

$(function(){
  //bind event
  $("li.level1").mouseenter(   
    function(){
       // make sure the item would diplay
       $(this).find("ul:first").find("li.level2").show(); 
       // do "show" 
       $(this).find("ul:first").show(500);       
    });

  $("li.level1").mouseleave(
      function() {
        // do "hide" 
        $(this).find(":parent").hide(500);
      }
  );
});