jQuery下拉菜单动画

jQuery dropdown menu animation

本文关键字：动画 下拉菜单 jQuery      更新时间：2023-09-26

我有一个典型的子菜单结构:

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

和在设计/html模型中，我将使用CSS3过渡来动画子菜单，但由于pointer-events: none不是display: none的实际替代方案，这种方法不适用于实时站点。

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

我知道这听起来令人困惑，但这里是我正在寻找的一个基本版本:http://jsfiddle.net/jwq5R/(仅在支持pointer-events和CSS3过渡的浏览器中正确工作)，但仅与jQuery完成的动画。

我研究了一下，到目前为止，我就是不能让任何东西工作，以获得我想要的效果。

任何帮助都会很感激。

试试这个:

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();
        });
    });
});
相关文章：