CODEWITHSUNDEEP
javascriptjqueryanimation
alex
alex

Reputation: 490423

How to fix erratic animation in jQuery

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

Upvotes: 0

Views: 898

Answers (2)

Shog9
Shog9

Reputation: 159678

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

Upvotes: 4

Scott Evernden
Scott Evernden

Reputation: 39966

there's a jquery plugin you might want to look at that does close to what you are trying: here:

Upvotes: 1

Related Questions