Wie in jQuery

Question

erratisch Animation beheben

ich ein einfaches Menü in jQuery

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

Hier gebaut haben, ist eine Probe des Menüs

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

Und hier ist meine 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(); }); 

    }); 

    } 

} 

Dies erzeugt etwas verrücktes Verhalten. Zum Beispiel, manchmal das Menü rutscht nach unten und dann weiter rutschen rauf und runter. Ein weiteres Problem ist, dass das Menü perfekt heruntergleitet und dann zu einem leeren Hintergrund flackert, bevor es wieder zurückkehrt.

Hat jemand irgendwelche Hinweise, was ich falsch machen könnte?

Danke

Answer 1

Das einzige Problem, das ich rechts von der Fledermaus bin zu bemerken ist, dass der Code wird glücklich eine andere Animation anstellen, ohne die Warteschlange der bereits laufenden Animationen zu löschen - wenn Sie also die Maus ein bisschen ruckeln, werden Sie wiederholt Menüs öffnen und schließen, im Stil von Poltergeist!

Zum Glück, das ist eine einfache Lösung: werfen nur in einem Aufruf von stop() vor jedem animate() Anruf ...

Answer 2

ein jquery es Plugin Sie vielleicht auf das tut der Nähe sehen wollen, was Sie versuchen: here: