Question

我的网站上有一个图像，它有一个分配给它的jquery悬停操作。但是很容易意外地将鼠标移到该区域上，并且如果你不止一次这样做，则悬停会一直出现，消失，出现等，直到它显示并且每次你在它上面消失时消失一次。除非你徘徊几秒钟，否则有没有办法让它不会发动？我不想只是延迟动作，因为它仍然会发生在每次鼠标悬停时，我想看看是否有一种方法鼠标悬停不计算，除非你在图像上几秒钟。

到目前为止

脚本：

$("img.badge").hover(
function() {
  $("h3.better").animate({"left": "125px"}, 1200);
},
function() {
  $("h3.better").animate({"left": "-500px"}, 800);
});

Answer 1

您可以使用setTimeout启动操作，并在clearTimeout事件上绑定调用mouseout的函数：

$('img.badge').hover(function(){
    window.mytimeout = setTimeout(function(){
        $("h3.better").animate({"left": "125px"}, 1200);
    }, 2000);
}, function(){
    clearTimeout(window.mytimeout);    
});

或者您可以使用插件，例如hoverintent。

Answer 2

在动画制作之前使用.stop()取消上一个动画。我相信这正是您所寻找的，并将解决您当前的问题。

$("img.badge").hover(
function() {
  $("h3.better").stop().animate({"left": "125px"}, 1200);
},
function() {
  $("h3.better").stop().animate({"left": "-500px"}, 800);
});

Answer 3

你可以使用一个计时器来触发悬停动作，直到你像这样徘徊一定时间然后，如果悬停在计时器开始之前离开，你清除计时器，如果你＆没有任何反应＃39;只是在短时间内徘徊：

$("img.badge").hover(function() {
    var timer = $(this).data("hover");
    // if no timer set, set one otherwise if timer is already set, do nothing
    if (!timer) {
        // set timer that will fire the hover action after 2 seconds
        timer = setTimeout(function() {
            $("h3.better").stop(true).animate({"left": "125px"}, 1200);
            $(this).data("hover", null);
        }, 2000);
        // save timer
        $(this).data("hover", timer);
    }
}, function() {
    var timer = $(this).data("hover");
    if (timer) {
        clearTimeout(timer);
        $(this).data("hover", null);
    } else {
        // probably would be better to make this an absolute position rather
        // than a relative position
        $("h3.better").stop(true).animate({"left": "-500px"}, 800);
    }
});

注意：我还在动画中添加了.stop(true)，因此动画永远不会堆积起来。

延迟Javascript悬停操作

3 个答案: