jquery Annulation d'un événement retardé (setTimeout) si quelque chose se produit

Question

En langage simple, ce code entre en action lorsqu'un élément est survolé. Quand il est survolé, j'ajoute une classe et montre l'élément, puis après 5 secondes, j'inverse tout: c'est-à-dire que j'affaiblis ce que j'ai précédemment montré et supprime la classe que j'ai précédemment ajoutée.

$("#it").addClass('somestyle').show(); 
setTimeout(function(){ 
    $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); }); 
}, 5000); 

• mon code propre ou aki? Comment annuler ces actions retardées (fadeout et suppression de classe) si l'élément I est survolé à nouveau pendant ces 5 secondes de retard. Si c'est plané à nouveau, je ne veux pas que les actions retardées prévues se produisent réellement.

Answer 1

Déclarer hors de la fonction

var timer; 

puis à l'intérieur de la fonction:

$("#it").addClass('somestyle').show(); 
clearTimeout(timer); 
timer=setTimeout(function(){ 
    $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); }); 
}, 5000); 

Avec ce code d'abord vous désactivez le délai d'attente, puis vous le réglez à nouveau, il attendra à nouveau lorsque cette fonction est déclenchée.

Answer 2

Cet article couvre de nombreuses méthodes sur la décoloration/animant le vol stationnaire:

http://greg-j.com/2008/07/21/hover-fading-transition-with-jquery/

Voir aussi les échantillons pour quoi il ressemble:

http://greg-j.com/static-content/hover-fade-redux.html

Il y a aussi est un similaire question here, avec cette solution:

$('.icon').hover(function() { 
    clearTimeout($(this).data('timeout')); 
    $('li.icon > ul').slideDown('fast'); 
}, function() { 
    var t = setTimeout(function() { 
     $('li.icon > ul').slideUp('fast'); 
    }, 2000); 
    $(this).data('timeout', t); 
}); 

Answer 3

Vous pouvez définir un indicateur lorsque vous passez la souris, etc. vol stationnaire

IsHovering = 1; 

lorsque les finitions en vol stationnaire,

IsHovering = 0; 

alors seulement exécuter le code dans votre délai d'attente

if(IsHovering==0)