Question

我在菜单上有jquery的悬停效果，它工作正常，但是如果你将鼠标移动到项目上几倍，那么动画就会在你进入该区域的时间内继续进行，对不起，如果我不能按照我的意愿解释我的问题，我需要的是某种延迟，所以如果你多次移动鼠标，该功能只会触发一次，然后你等待1秒再次获得效果。谢谢！

$(".border").hover(function(){
    if($(this).next('.sous_menu').is(':visible')){
        $('.sous_menu').closest('.border').removeClass('border').addClass('border_active');
    }else{
        $(this).toggleClass('border_active border', 500);
    }
});

http://jsfiddle.net/xb8Ss/9/

Answer 1

您可以查看此插件：hoverIntent jQuery Plug-in，如此问题中所述Delay jquery hover event?

Answer 2

尝试在切换前添加delay()和stop（）。 stop()将停止任何正在进行的动画，以防止几乎无限的动画。而delay()将延迟它放置多少毫秒。

$(this).stop()delay(1000).toggleClass('border_active border', 500);

Answer 3

你可以通过添加一个checker var并在超时时进行chaning来检查函数是否在最后一秒执行：

// the first time should always be allowed
var allow = true

$(".border").hover(function(){

    // if 'allow' is false, return without doing anything
    if(!allow) {
        return;
    }

    // the function is now gonna execute, don't allow
    // other events from executing the function
    allow = false;


    // executing the function
    if($(this).next('.sous_menu').is(':visible')){
        $('.sous_menu').closest('.border').removeClass('border').addClass('border_active');
    }else{
        $(this).toggleClass('border_active border', 500);
    }


    // after a second of the execution of the function, set allow to
    // true again to allow other events from executing the function
    setTimeout(function() {
        allow = true
    }, 1000)

});

Answer 4

如果我理解这个问题，我相信这就是你要找的......

$(document).ready(function() {
    var canMove = true;

    $("#moveme").hover(function() {
        if(canMove) {
            canMove = false;

            $(this).css("left", "50px");
            setTimeout(function() { canMove = true; }, 1000);
        }
    }, function() {
        $(this).css("left", "10px");
    });
});

jsfiddle here

上面的悬停代码只会在达到1000（1秒）的“冷却时间”后运行。或者，您可以在悬停出口处将集合canMove设置为true，这将确保代码每个悬停仅运行一次（即使已经是这种情况）。

延迟函数jquery

4 个答案: