javascript - jQuery 下拉菜单动画

Question

我有典型的子菜单结构:

<ul>
  <li>
    <a href="#">Parent link</a>
    <ul>
      <li><a href="#">Submenu link</a></li>
    </ul>
  </li>
</ul>

在 design/html 模型中，我会使用 CSS3 过渡来为子菜单设置动画，但从 pointer-events: none 开始不是 display: none 的实用替代方案，此方法不适用于实时网站。

我认为 jQuery 将是创建我想要的跨浏览器动画的唯一方法。当家长<li>悬停时，我希望子菜单的不透明度从 0 变为 100，但也随着边距变化而上升。

我知道这听起来很令人困惑，但这是我正在寻找的基本版本:http://jsfiddle.net/jwq5R/ (仅在支持 pointer-events 和 CSS3 转换的浏览器中正常工作)但仅适用于使用 jQuery 完成的动画。

我进行了研究，但到目前为止我还没有任何办法来达到我想要的效果。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

试试这个:

http://jsfiddle.net/jwq5R/1/

$(function(){
    $('#nav>li').hover(function() {
        $(this).closest('li').find('>ul').css({
            'opacity': 0,
            'margin-top': 15
        }).show().animate({
            'margin-top': 0,
            'opacity': 1
        }, 300);
    }, function() {
        $(this).closest('li').find('>ul').fadeOut(200, function() {
            $(this).hide();
        });
    });
});