jQuery – arrête l’animation en cours (fadeOut) et ré-affiche quand la souris entre / sort rapidement

J’ai un

qui, une fois survolé, affichera du texte. Lorsque la souris s’en va, le texte s’efface. Cependant, si la souris entre à nouveau dans

avant la fadeOut du fadeOut , le texte ne sera plus jamais fadeOut .

Je suis conscient de l’ hoverintent , mais je préférerais ne pas l’utiliser en raison du léger retard perçu qu’il donne aux événements mouseEnter/mouseLeave .

N’y at-il aucun moyen que, avec mouseEnter , il efface simplement le fadeOut et affiche à nouveau le texte?

Ma tentative actuelle utilisant des délais d’attente:

 var timeouts = {}; $(document).ready(function(){ $('#wrapper').hover(function(){ clearTimeout(timeouts['test_hover']); $('#text').show(); }, function(){ timeouts['test_hover'] = setTimeout(function(){ $('#text').fadeOut('slow'); }); }); }); 

jsbin: http://jsbin.com/upotuw/5

vidéo: http://www.youtube.com/watch?v=7RLrz1bEQuU

EDIT: le problème nécessitait de transmettre les deux parameters à la fonction stop() : stop(true,true)

Le code de travail final est le suivant:

 var timeouts = {}; $(document).ready(function(){ $('#wrapper').hover(function(){ clearTimeout(timeouts['test_hover']); $('#text').stop(true,true).show(); }, function(){ timeouts['test_hover'] = setTimeout(function(){ $('#text').fadeOut('slow'); }); }); }); 

http://jsbin.com/upotuw/7

Vous voulez examiner la fonction stop() JQuery:

http://api.jquery.com/stop/