jQuery Hover with Delay lorsque l'utilisateur déplace sa souris

Question

J'essaie donc d'obtenir une situation de type popup, où l'utilisateur survole un élément, lorsque l'utilisateur survole cet élément, jQuery ajoute une classe à un autre élément frère le rend visible. Lorsque l'utilisateur passe la souris, je voudrais ajouter un délai de 5 secondes avant que la classe ne soit à nouveau supprimée, mais mes tentatives n'ont pas encore abouti, quelqu'un peut-il me donner un pointeur sur la méthode que je peux utiliser?

Voici le code que je utilise au moment:

$('.spaceship-container').hover(
function(){ 
    $('.take-me-to-your-newsletter').addClass('show') 
}, 
function(){ 
    setTimeout(3000); 
    $('.take-me-to-your-newsletter').removeClass('show') 
} 
); 

Answer 1

Utilisation de la syntaxe correcte de la fonction setTimeout() fixe votre problème. Mais vous devez également arrêter la fonction de souris en utilisant clearTimeout().

var timer; 
$('.spaceship-container').hover(
    function() { 
    clearTimeout(timer); 
    $('.take-me-to-your-newsletter').addClass('show'); 
    }, 
    function() { 
    timer = setTimeout(function(){ 
     $('.take-me-to-your-newsletter').removeClass('show'); 
    }, 3000); 
    } 
); 

Answer 2

Vous devez ajouter le removeClass dans le rappel de setTimeout comme ci-dessous:

$('.spaceship-container').hover(
function(){ 
    $('.take-me-to-your-newsletter').addClass('show') 
}, 
function(){ 
    setTimeout(function(){ 
     $('.take-me-to-your-newsletter').removeClass('show') //here 
    },3000); 
}); 

donc qu'une fois les 3 secondes l'heure est terminée, les lignes à l'intérieur de la fonction de rappel seront exécutées.

Plus un DEMO pour vous