jQuery - Flicker d'animation utilisant hover()

J'ai une configuration telle que décrite dans ce question qui fonctionne parfaitement. Essentiellement, un menu déroulant se développe lorsque vous déplacez votre souris dessus pour exposer plus d'options.jQuery - Flicker d'animation utilisant hover()

Il y a, cependant, un petit problème. Si vous déplacez la souris à l'extérieur de la div #dropdown et que vous la rallumez rapidement, elle déclenche constamment les événements mouseenter et mouseleave, provoquant un cycle interminable de scintillement. Comment puis-je le contourner?

Voici mon code actuel jQuery

$("#dropdown").hover(function() { 
     $(this).stop(true,true).fadeTo('fast',1); 
     $("#options").stop(true,true).slideDown(); 
    }, function() { 
     $(this).stop(true,true).fadeTo('fast',0.1); 
     $("#options").stop(true,true).slideUp(); 
    } 
);

et le code HTML actuel

<div id="dropdown"> 
    <div id="optionsPeek">Options</div> 
    <div id="options"> 
     <!-- Links here --> 
    </div> 
</div>

dropdown est visible par défaut (opacité de 10%), optionspeek est toujours visible et une fois que vous survolez, la div options glisse vers le bas et les liens à l'intérieur deviennent visibles.

Source

2010-05-18 Chris

Pouvez-vous publier le balisage en .html? Je suppose que '# options' ne se trouve pas dans' # dropdown'? –

Et si vous ajoutez un delay() au fondu de sortie? Par exemple 1-2 secondes. De cette façon, vous pouvez déplacer votre souris et revenir sur la liste déroulante sans provoquer d'animations.

http://api.jquery.com/delay/

Source

2010-05-18 15:47:58 Alec

Cela a l'air bien, mais malheureusement, il ne semble pas fonctionner avec 'stop()' – Chris

J'ai obtenu ce fonctionnement parfaitement et il semble maintenant très bien, merci – Chris

Le meilleur moyen que j'ai trouvé pour faire face à de tels problèmes est d'utiliser le plug-in HoverIntent. Il a été conçu pour éviter les problèmes de scintillement que vous rencontrez.

Source

2010-05-18 15:47:05 GSto

Je ne semble pas être obtenir le vous vacillante mentionné, mais encore une fois - j'ai créé le balisage parce que le vôtre n'était pas disponible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#dropdown").hover(function() { 
     $(this).stop(true,true).fadeTo('fast',1); 
     $("#options").stop(true,true).slideDown(); 
    }, function() { 
     $(this).stop(true,true).fadeTo('fast',0.1); 
     $("#options").stop(true,true).slideUp(); 
    } 
); 
}); 
</script> 
</head> 
<body> 
<div id="dropdown" style="width: 300px; height: 150px; border: 1px solid black;">DROPDOWN</div> 
<div id="options" style="width: 300px; height: 150px; border: 1px solid black;">OPTIONS</div> 

</body> 
</html>

Source

2010-05-18 15:52:20

utilisation:

overflow: hidden;

Source

2010-08-03 11:18:21 josh

jQuery - Flicker d'animation utilisant hover()

Répondre

Questions connexes