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