jQuery懸停與用戶移動鼠標

所以我試圖實現一個彈出的情況下，用戶將鼠標懸停在一個元素，當用戶懸停在這個元素，jQuery添加一個類到另一個兄弟元素使其可見。當用戶徘徊時，我想在類再次被刪除之前添加一個類似5秒的延遲，但是我迄今爲止的嘗試尚未完成，任何人都可以給我一個指示我可以使用哪種方法的指針？jQuery懸停與用戶移動鼠標

這裏是我使用的時刻代碼：

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

來源

2015-09-11 Richard Grandi

是這樣的？ $（ '飛船容器 '）。懸停（ \t函數（）{ \t \t $（' 取我到您的時事通訊 '）。addClass（' tmtyn'） \t}的setTimeout（3000 ，function（）{$（'。take-me-to-your-newsletter'）。removeClass（'tmtyn'） \t}）; –

[JavaScript.setTimeout]（http://stackoverflow.com/問題/ 10312963/javascript-settimeout） – D4V1D

使用正確的語法的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); 
    } 
);

來源

2015-09-11 13:34:54 RRK

雖然這個答案也是正確的，但我會通過@ Guruprasad-Rao正確選擇一個答案，因爲在答案中添加了一個解釋級別，謝謝 –

@RichardGrandi。我同意Rejith ，如果您允許用戶再次懸停該元素，則可能需要再次清除「超時」，除非您用覆蓋層覆蓋整個內容.. :) +1好思維Rejith .. –

@guruprasad rao謝謝。 :-) – RRK

您需要添加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你

來源

2015-09-11 13:34:12

jQuery懸停與用戶移動鼠標

回答

相關問題