懸停設置超時不起作用

我想display:none如果用戶將我的標題懸停了500毫秒，但以下JQuery代碼不起作用。錯誤在哪裏？懸停設置超時不起作用

$('.banner').hover(function() { 

     setTimeout(function(){ 

     $(this).css('display','none'); 

    }, 500); 
});

來源

2011-12-12 user198989

*我想顯示：無。如果用戶有500毫秒懸停它*那是什麼意思？懸停*爲* 500毫秒？在任何情況下，回調中的'this'都指向'window'。 –

你是什麼意思「不工作？「 – tvanfosson

的this裏面你setTimeout不指this在hover功能。您可以在hover功能緩存this，以便它可以在setTimeout功能使用：

$('.banner').hover(function() { 

     var $this = $(this); 

     setTimeout(function(){ 

      $this.css('display','none'); 

    }, 500); 
});

這裏是一個演示：http://jsfiddle.net/hVejj/

更新

var timer; 
$('.banner').hover(function() { 

     var $this = $(this); 

     timer = setTimeout(function(){ 

      $this.css('display','none'); 

    }, 500); 
}, 
function() { 
    clearTimeout(timer); 
});

這裏是一個演示此更新：http://jsfiddle.net/hVejj/1/

來源

2011-12-12 19:36:31 Jasper

謝謝賈斯珀，這工作。但實際上，我想要做的是，如果用戶懸停在500毫秒的橫幅。沒有火過後快速懸停和鼠標。 – user198989

@ user198989檢查我的更新，它應該做的伎倆你想要的功能稱爲'hoverIntent'，並且有一個插件，但是我的更新是基本想法。 – Jasper

完美。謝謝。 – user198989

您不能像匿名函數那樣通過$(this)。將它設置爲一個變量，而不是

$('.banner').hover(function() { 

    var banner = $(this); 

    setTimeout(function() { 

     banner.css('display', 'none'); 

    }, 500); 


});

http://jsfiddle.net/fkjn6/

來源

2011-12-12 19:35:51

你需要給回調函數訪問權this變量：如果你想讓它

var timeout; 
$('.banner').hover(
    var banner = $(this); 

    // Hover In 
    function() { 
     timeout = setTimeout(function() { banner.hide(); }, 500); 
    }, 
    // Hover Out 
    function() { 
     clearTimeout(timeout); 
    } 
);

來源

2011-12-12 19:37:27 Thor84no

用戶將鼠標懸停時間超過500毫秒後，下面的代碼會隱藏廣告當你將它懸停超過500毫秒時隱藏橫幅，那麼你需要保存對被隱藏的DOM元素的引用。如果您在超時觸發之前停止懸停，您可能還想清除計時器。你需要分別帶入和輸出處理程序的簽名。存儲定時器手柄並在停止懸停時將其清除（如果尚未過期）。

var hoverTimer = null; 
$('.banner').hover(function() { 
    var $banner = $(this); 
    hoverTimer = setTimeout(function(){ 
        hoverTimer = null; 
        $banner.css('display','none'); 
       }, 500); 
}, function() { 
    if (hoverTimer) { 
     clearTimeout(hoverTimer); 
    } 
    hoverTimer = null; 
});

來源

2011-12-12 19:37:34

：

$('.banner').hover(function() { 
     var temp = this; 
     setTimeout(function(){ 
     temp.css('display','none'); 
    }, 500); 
});

來源

2011-12-12 19:38:51 tvanfosson

試試這個：

$('.banner').hover(function() { 
    var me = $(this); 
    setTimeout(function(){ 
    me.css('display','none'); 
    }, 500); 
});

的這個變量而改變含義基於範圍。一旦進入函數setTimeout（）調用這個不再是指.banner元素。

因此，您需要「保存」該引用，以便您可以在函數中使用setTimeout（）調用。

來源

2011-12-12 19:38:57 jason

如果你想要做什麼，我想，這樣的事情應該使其工作：

var tmp_abort 
$('.banner').mouseenter(function() { 
    tmp_abort=setTimeout(function(){ 
     $(this).css('display','none'); 
    }, 500); 
}); 

$('.banner').mouseleave(function(){ 
    clearTimeout(tmp_abort) 
});

來源

2011-12-12 19:47:05

你不必選擇'.banner'兩次，你可以鏈接調用：$（'。banner'）。mouseenter（）。mouseleave（）;'。歡迎使用stackoverflow！ – Jasper

懸停設置超時不起作用

回答

相關問題