Comment corriger l'animation erratique dans jQuery

J'ai construit un menu simple jQueryComment corriger l'animation erratique dans jQuery

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

Voici un échantillon du 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>

Et voici mon 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(); }); 

    }); 

    } 

}

Cela produit un comportement loufoque. Par exemple, il arrive que le menu glisse vers le bas et continue de glisser de haut en bas. D'autres nuisances sont le menu glisse parfaitement, puis scintille sur un fond blanc avant qu'il ne revienne.

Est-ce que quelqu'un a des indications sur ce que je peux faire de mal?

Merci

Source

2009-05-06 alex

ont besoin de plus du code, ce qui fait hoverIntent? –

hoverIntent est un plugin conçu pour que le vol stationnaire fonctionne mieux .. pas de mise en file d'attente des événements, ce qui les conduit à être renvoyés l'un après l'autre. J'ai aussi fourni un lien vers le haut. – alex

Essayez de mettre une variable d'animation si le menu est animé, mettez-la à true, et si le menu a fini de l'animer, mettez-la à false. – rymn

Le seul problème je remarque dès le départ est que votre code mettra joyeusement en file d'attente une autre animation sans effacer la file d'attente des animations déjà en cours - donc si vous secouez la souris un peu, vous aurez des menus s'ouvrant et se fermant à plusieurs reprises, style poltergeist!

Heureusement, c'est une solution facile: il suffit de jeter dans un appel à stop() avant chaque appel animate() ...

Source

2009-05-06 05:39:07 Shog9

Ah, je pensais que le plugin hoverIntent y remédierait. Merci, je vais incorporer – alex

il y a un plugin jquery vous voudrez peut-être regarder qui fait près de ce que vous essayez: here:

Source

2009-05-06 05:38:19

Comment corriger l'animation erratique dans jQuery

Répondre

Questions connexes