Question

将鼠标悬停在图像上时显示图像预览。现在我在显示预览图像之前保留间隔。假设我将延迟设置为1秒，如果我将鼠标拖出图像，它仍会显示预览，因为它在鼠标输入过程中被触发。如何解决这个问题？

我需要在1秒延迟后仅在悬停时显示预览，而不是在图像中没有鼠标时显示？

Answer 1

在jQuery 1.9+上，您可以使用delay/finish：

$("#preview").hover(function(){
    $("img").delay(1000).show(0); // passing 0 to show() will put animation in queue
}, function(){
    $("img").finish().hide(); // finish() will clear any previous delay(), despite what argues the DOC
});

Answer 2

使用setTimeout()的基本骨架可以是

var timer;
$('img').hover(function () {
    timer = setTimeout(function () {
        //do your stuff here
        $('div').show();

        timer = undefined;
    }, 1000);
}, function () {
    if (timer) {
        clearTimeout(timer);
        timer = undefined;
    } else {
        //hide the preview
        $('div').hide();
    }
})

演示：Fiddle

Answer 3

将setTimeout分配给鼠标悬停事件上的变量，如下所示：

var timer = setTimeout(function() { doSomething(); }, 1000);

然后在mouseout事件中清除，以便在您将鼠标悬停时显示：

clearTimeout(timer);

仅在鼠标悬停1秒后悬停时显示图像预览

3 个答案: