jQuery Hover with Delay, когда пользователь перемещает их мышью

Question

Итак, я пытаюсь достичь всплывающей ситуации, когда пользователь будет нависеть над одним элементом, когда пользователь наводится на этот элемент, jQuery добавляет класс к другому элементу-брату, который делает его видимым. Когда пользователь зависает, я хотел бы добавить задержку как 5 секунд, прежде чем класс будет удален снова, но мои попытки сделать это пока не сработали, может кто-нибудь дать мне указатель на какой метод я могу использовать?

Вот код, я использую в данный момент:

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

Answer 1

Использование правильного синтаксиса setTimeout() функция устраняет проблему. Но вам также нужно остановить функцию мыши, используя 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

Вы должны добавить removeClass внутри обратного вызова setTimeout, как показано ниже:

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

Так что, как только 3 секунды время будет завершено, линии внутри функции обратного вызова будут выполнены.

Плюс DEMO для вас