Как исправить ошибочную анимацию в jQuery

Question

Я построил простое меню в jQuery

http://vanquish.websitewelcome.com/~toberua/

Вот пример меню

<ul>
  <li id="your-residences">
    <strong>Your Residences</strong>

    <ul>
      <li class="menu-1"><a href=
      "/~toberua/your-residences/deluxe-ocean-front-bure/">Deluxe
      Ocean Front Bure</a></li>

      <li class="menu-2"><a href=
      "/~toberua/your-residences/premium-ocean-front-bure/">Premium
      Ocean Front Bure</a></li>
    </ul>
  </li>

  <li id="your-island">
    <strong>Your Island</strong>

    <ul>
      <li class="menu-1"><a href=
      "/~toberua/your-island/where-is-toberua/">Where is
      Toberua?</a></li>

      <li class="menu-2"><a href=
      "/~toberua/your-island/island-facilities/">Island
      Facilities</a></li>

      <li class="menu-3"><a href=
      "/~toberua/your-island/massage-and-spa/">Massage &amp;
      Spa</a></li>
    </ul>
  </li>
</ul>

А вот мой jQuery:

var menu = {

  init: function() {

    $('#header > ul > li').hoverIntent(function() {
      $(this).find('ul').show().css({opacity: '0.3'}).height(0).animate({height: '88px', opacity: '1.0'}, 800);

    }, function() {

      $(this).find('ul').animate({height: '0', opacity: '0.3'}, 400, function() { $(this).hide();  }); 

    });

  }

}

Это вызывает какое-то дурацкое поведение. Например, иногда меню скользит вниз, а затем продолжает скользить вверх и вниз. Другие неприятности в том, что меню отлично скользит вниз, а затем мигает на пустом фоне, прежде чем снова вернуться.

У кого-нибудь есть указания на то, что я могу делать неправильно?

Спасибо

Answer 1

Единственная проблема, которую я сразу заметил, состоит в том, что ваш код с радостью поставит в очередь очередную анимацию без очистки очереди от уже запущенных анимаций - поэтому, если вы немного подергаете мышью, вы получите открытие меню и повторюсь несколько раз, в стиле полтергейста!

К счастью, это легко исправить: просто наберите номер stop() перед каждым animate() вызовом ...

Answer 2

есть плагин jquery, на который вы, возможно, захотите посмотреть, который близок к тому, что вы пытаетесь: здесь :