Question

I have built a simple menu in jQuery

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

Here is a sample of the menu

<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>

And here is my 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();  }); 

    });

  }

}

This is producing some wacky behaviour. For example, sometimes the menu slides down and then continues to slide back up and down. Other nuisances is the menu slides down perfectly, then flickers to a blank background before it comes back again.

Does anyone have any pointers to what I may be doing wrong?

Thank you

Answer 1

The only problem I’m noticing right off the bat is that your code will happily queue up another animation without clearing the queue of already-running animations – so if you jerk the mouse around a bit, you’ll get menus opening and closing repeatedly, poltergeist-style!

Fortunately, that’s an easy fix: just throw in a call to stop() prior to each animate() call…