Have Geek Brain

How to fix unsteady animation in jQuery

I have created a simple menu in jQuery

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

Here is a sample 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 leads to some wacky behavior. For example, sometimes the menu slides down and then continues to move up and down. The other annoyance is a menu that slide down, then flickers to a blank background before it comes back again.

Does anyone have any pointers on what I might be doing wrong?

thanks

0


a source to share


2 answers


The only problem I notice right off the bat is that your code will happily stop the next animation without clearing the queue of already running animations, so if you roll your mouse a little, you open the menu and close it again, poltergeist style !



Fortunately, this is a simple fix: just challenge stop()

before every animate()

call ...

+4


a source


there is a jquery plugin you might want to look at, this is close to what you are trying: here :



+1


a source






More articles:


All Articles