jQuery/Javascript圖片庫更改圖像，如果爲X懸停，但不是如果小於X

Question

這可能是一個非常簡單的答案，但我一直在思考它一段時間，不能認爲它是什麼。

我有一個圖片庫縮略圖和一個主要圖像，我想改變主圖像，如果用戶懸停在縮略圖上說500ms，但如果他們將鼠標拖過其他縮略圖時，小於500ms，所以我不想讓圖像改變。

感謝大家的回答，只是想出來，回來發佈，但你們都打敗了我，再次感謝！

Answer 1

Wel升，你將不得不使用JavaScript計時器與setTimeout()和clearTimeout()。

基本上你會在鼠標進入你的圖像時創建一個計時器 - 當光標熄滅時你清除它：如果它還沒有運行，它將被取消。

var timer; 
$('img').mouseenter(function() { 
    timer = setTimeout(function() { 
     // do something here 
    }, 500); 
}).mouseleave(function() { 
    clearTimeout(timer); 
}); 

DEMO

Answer 2

嘗試......

var timeout; 
$('.yourimages').mouseenter(function() { 
    timeout = setTimeout(function() { // remember the "task" id so we can clear it if required 
     //change image 
    }, 500); // number of milliseconds to wait 
}).mouseleave(function() { 
    clearTimeout(timeout); // clear the timeout 
}); 

它設置，如果鼠標離開圖像後500個毫秒，但執行復位定時器。很明顯，你需要與類圖像的更換.yourimages，如果需要

Answer 3

您可以使用這樣的機制，你可以更改超時：

var myTimer; 
$('#myElement').hover(function(){ 
setTimeout(function(){ 
alert('Now I\'d be ready'); 
},500); 
},function(){ 
clearTimeout(myTimer); 
}); 

參見：https://developer.mozilla.org/en/DOM/window.setTimeout的信息上setTimeout()

要添加的另一件事可能會指向您的hoverIntent插件，這可能正是您在尋找的內容：http://cherne.net/brian/resources/jquery.hoverIntent.html