jquery addClass - wait, delay, speed, timeout ou autre

Question

La question a été postée plusieurs fois et est comment retarder une addClass.

J'ai obtenu ceci:

$("#menu ul li").hover(function(){ 
    $(this).addClass("hover"); 
},function(){ 
    $(this).removeClass("hover"); 
}) 

et que vous voulez quelque chose de similaire, mais où la classe est ajouté après 500msek environ. La meilleure réponse jusqu'à présent est celle-ci en utilisant settimeout. Peut-être que j'ai juste besoin d'un exemple de travail: How to wait 5 seconds with jQuery?

Le hooverIntent ne fonctionnera pas car il doit être un addClass.

Br. Anders

MISE À JOUR: Quatre bonnes réponses! Merci. Je ne sais pas pourquoi je ne pensais pas que le hoverIntent fonctionnerait, il peut être utilisé comme vu dans les réponses. En fait, toutes les réponses peuvent être utilisées avec les avantages et les inconvénients. Je vais aller avec le hoverIntent même si un autre plugin doit être inclus. Le pro pour le hoverIntent est qu'une sensibilité peut être définie de sorte que non seulement un délai pour l'addClass peut être défini mais il commence à compter quand la souris est encore positionnée sur la zone (ou pas si la sensibilité est affectée)

Answer 1

Je ne vois pas pourquoi hoverIntent ne fonctionnera pas:

$("#menu ul li").hoverIntent({  
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
    interval: 200, // number = milliseconds for onMouseOver polling interval  
    timeout: 500, // number = milliseconds delay before onMouseOut  
    over:function(){ 
     $(this).addClass("hover"); 
    }, 
    out: function(){ 
     $(this).removeClass("hover"); 
    } 
}); 

Answer 2

$("#menu ul li").hover(function(){ 
    var $this = $(this); 
    var ovt = setTimeout(function(){$this.addClass('hover'); clearTimeout(ovt);}, 500); 
},function(){ 
    var $this = $(this); 
    var out = setTimeout(function(){$this.removeClass('hover'); clearTimeout(out);}, 500); 
}); 

Est-ce ce que vous cherchez?

Answer 3

Quelque chose comme ça

$(function(){ 
    $("#menu ul li").hover(function(){ 
     var elem = $(this); 
     setTimeout (function(){ 
      elem.addClass("hover"); 
     }, 1000) ; 
     },function(){ 
     var elem = $(this); 
     setTimeout (function(){ 
      elem.removeClass("hover"); 
     }, 1000) ; 
    }) 
}); 

Answer 4

Laissant setTimeout et hoverintent côté (bien qu'ils sont les moyens les plus évidents pour aller), ne pourrions-nous pas utiliser un rappel d'animation null pour cela?

$("#menu ul li").hover(function(){ 
    $(this).animate("",500,"",function(){$(this).addClass("hover")}; 
},function(){ 
    $(this).animate("",500,"",function(){$(this).removeClass("hover"); 
})