9

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

到目前为止的脚本：

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

3 回答 3

13

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

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

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

于 2013-02-11T18:26:39.680 回答
1

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

$("img.badge").hover(
function() {
  $("h3.better").stop().animate({"left": "125px"}, 1200);
},
function() {
  $("h3.better").stop().animate({"left": "-500px"}, 800);
});
于 2013-02-11T18:27:41.320 回答
0

您可以使用计时器不触发悬停动作，直到您像这样悬停了一定时间，然后，如果悬停在计时器触发之前离开，您清除计时器，因此如果您只是悬停，则不会发生任何事情短时间：

$("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)到您的动画中，因此动画永远不会堆积。

于 2013-02-11T18:29:54.553 回答