2009-09-11 15 views
3

Cas: Le code Jquery gère une étiquette EM coulissante (avec la fonction slideToggle) pour son apparition en vol stationnaire.Comment empêcher la file d'attente des fonctions SlideToggle?

Problème: La commande slideToggle met parfois en attente l'état du survol. Je renvoie à cet article: http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

J'ai essayé d'insérer la fonction stop(), mais pas affecté slideToggle(); Mais les méthodes sont bonnes pour animer la fonction.

C'est le code où je travaille sur:

code Jquery:

$(document).ready(function() { 
    $('#ProdImg a .priceTag').slideUp();  

    $('#ProdImg a').mouseover(function() { 
     $(this).stop().find('.priceTag').slideToggle(); 
    }); 

    $('#ProdImg a').mouseout(function() { 
     $(this).stop().find('.priceTag').slideToggle(); 
    }); 
}); 

Code HTML:

<div id="ProdImg" style=" height:240px;"> 
    <a title="TEXT" href="TEXT_URL" style="position:absolute; margin-left:10px;"> 
    <em style="text-align:right; color:#666;" class="priceTag"> 
     <div class="colorGoldGradient" style="width:100%;"> 
      <div class="rightGoldGradient" style="width:100%;"> 
       <div class="leftGoldGradient" style="width:100%;"> 
        <div style="padding-left:5px; padding-right:10px;">Prezzo:<br /> 
        TEXT 
        </div> 
       </div> 
      </div> 
     </div> 
    </em> 
    <span class="offertaTag"><span> 
    </a> 
</div> 
+1

Quelle est la mise en page imbriquée que vous développez ??? – CoolEsh

Répondre

14

Bien que ce soit un an maintenant, il est toujours utile de répondre, dans votre exemple vous arrêtez l'animation sur l'élément #ProdImg a. Vous voulez l'arrêter sur .priceTag. Pour ce faire, votre code devrait comme ceci:

$(document).ready(function() { 
    $('#ProdImg a .priceTag').slideUp();   

    $('#ProdImg a').mouseover(function(){ 
     $(this).find('.priceTag').stop().slideToggle(); 
    }).mouseout(function(){ 
     $(this).find('.priceTag').stop().slideToggle(); 
    }); 
}); 

Notez l'arrêt () vient après la découverte. Cela signifie que vous arrêtez l'animation sur cet élément, pas sur l'élément parent qui n'a aucune animation en cours d'exécution.

+1

Merci beaucoup d'expliquer pourquoi stop() doit venir après la découverte. J'ai essayé de comprendre pourquoi mes menus restent parfois (mais pas toujours) visibles après le passage à la souris pendant ~ 3-4 semaines maintenant. Je n'ai même pas remarqué que stop() arrêtait incorrectement le parent. – Gemini14