jQuery mouseenter-mouseleave的怪癖

Question

我试图在光标进入其父元素时为元素设置动画，并在鼠标退出元素时可靠地反转该动画 - 对于多级嵌套元素。我可以用CSS（转换不是一个选项）来做它，但是想用jQuery来塑造它;）

我想要实现的一个例子就是这种类型的accordion menu，但正如我所说的，使用jQuery。

到目前为止，我对同一个例子有tried using mouseenter and 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);
      }
  );
});