délai à la souris sur la fonction

Question

J'ai un menu déroulant,

<ul> 
<li><a>link 1</a> 
<ul><li><a>link 1</a></li></ul> 
</li> 
</ul> 

J'utilise la JS suivante pour utiliser hover et afficher les menus enfants.

Je veux ajouter un délai à la souris en fonction (lorsque la classe de la LI enlevée) à propos de 500ms,

$('li').hover(function(){ 
    $(this).addClass('over'); 
    }, function(){ 
    $(this).removeClass('over'); 
    }); 

S'il vous plaît faire nécessaire dans ce domaine.

merci à l'avance

Answer 1

Vous pouvez faire quelque chose comme ceci:

$('li').hover(function(){ 
    var timer = $(this).data('timer'); 
    if(timer) clearTimeout(timer); 
    $(this).addClass('over'); 
}, function(){ 
    var li = $(this); 
    li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500)); 
}); 

Cela efface tout délai d'attente lors du survol au-dessus (au cas où vous placez le curseur, laissez, vol stationnaire en arrière, vous devez vérifier ceci) et définit un délai de 500ms en quittant le vol stationnaire, en stockant l'ID de délai sur le li lui-même en utilisant .data().

Answer 2

$('li').hover(function(){ 
    $(this).addClass('over'); 
    }, function(){ 
    setTimeout(function(){$(this).removeClass('over')}, 500); 
    });