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);
      }
  );
});