如果悬停在 X 上，jQuery/Javascript 图像库会更改图像，但如果小于 X 则不会答案

【问题标题】：jQuery/Javascript image gallery change image if hovered over for X but not if less than X如果悬停在 X 上，jQuery/Javascript 图像库会更改图像，但如果小于 X 则不会
【发布时间】：2012-03-14 09:44:33
【问题描述】：

这可能有一个非常简单的答案，但我已经思考了一段时间，想不出它是什么。

我有一个带有缩略图和一个主图像的图片库，如果用户将鼠标悬停在缩略图上，例如500ms，我想更改主图像，但如果他们将鼠标拖过其他缩略图，则悬停的时间会小于500ms，所以我不想改变图像。

感谢所有回答的人，只是想通了，然后回来发布，但你们都打败了我，再次感谢！

【问题讨论】：

标签： javascript jquery hover delay image-gallery

【解决方案1】：

好吧，您必须使用带有setTimeout() 和clearTimeout() 的javascript 计时器。

基本上你会在鼠标进入你的图像时创建一个计时器 - 当光标消失时你会清除它：如果它还没有运行，它将被取消。

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

DEMO

【讨论】：

我刚刚想通了，准备发布这个：P 无论如何感谢您的时间！

【解决方案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 替换为图像的类，如果需要，您可以更改超时

【讨论】：

【解决方案3】：

你可以使用这样的机制：

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

有关setTimeout()的信息，请参阅：https://developer.mozilla.org/en/DOM/window.setTimeout

要添加的另一件事可能是将您指向hoverIntentplugin，这可能正是您正在寻找的：http://cherne.net/brian/resources/jquery.hoverIntent.html

【讨论】：