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的实用替代方法，因此这种方法对于实时网站来说并不是很好。< / p>

我认为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();
        });
    });
});

jQuery下拉菜单动画

1 个答案: