Question

I have the typical submenu structure:

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

and in design/html mockups, I would use CSS3 transitions to animate the submenus but since pointer-events: none isn’t a practical alternative for display: none, this method isn’t great for live sites.

I figure jQuery would be the only way to create the cross-browser animation I want. When the parent <li> is hovered, I want the submenu to go from 0 opacity to 100, but also rise up with a margin change.

I know it sounds confusing, but here’s a basic version of what I’m looking for: http://jsfiddle.net/jwq5R/ (only works correctly in browsers that support pointer-events and CSS3 transitions) but only with the animation done with jQuery.

I researched and I just can’t get anything to work so far to get the effect I want.

Any help would be appreciated. Thanks in advanced.

Answer 1

Try this:

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