Анимация выпадающего меню 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();
        });
    });
});