2

我正在处理一个嵌套菜单，当我的鼠标移到一个选项上时，会出现一个子列表。这是我的悬停功能：

$( ".sublist" ).parent().hover( function () {
    $(this).toggleClass("li_hover",300); //use to change the background color
    $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});

现在，我想在子列表出现之前添加一小段时间，以防止疯狂的鼠标从用户身上移动。有人对此有什么好的建议吗？

更新：

谢谢你们，我对我的程序做了一点改动，最近它看起来像这样：

function doSomething_hover (ele) {
    ele.toggleClass("li_hover",300);
    ele.find(".sublist").toggle("slide", {}, 500);
}

$(function () {
    $( ".sublist" ).parent().hover( function () {
        setTimeout(doSomething_hover($(this)), 3000);
    });
}):

这很奇怪 setTimeout 不会延迟任何事情。但是如果我将函数调用更改为doSomething_hover（不带“（）”），该函数将延迟良好。但我不能将任何 jquery 元素传递给函数，所以它仍然无法正常工作，有人可以告诉我如何doSomething_hover($(this))工作setTimeout吗？

更新 2：得到了 setTimeout 的工作，但它似乎不是我想要的：我真正想要的是什么都不会发生，如果鼠标悬停在小于 0.5 秒的选项上。

无论如何，这是我让 setTimeout 工作的代码：

function doSomething_hover (ele) {
    ele.toggleClass("li_hover",300);
    ele.find(".sublist").toggle("slide", {}, 500);
}

$(function () {
    $( ".sublist" ).parent().hover( function () {
        var e = $(this);
        setTimeout(function () { doSomething_hover(e); }, 1000);
    });
}):

最终更新：当我将鼠标移出时，我使用 clearTimeout 完成了这项工作。所以代码应该是：

    $( ".sublist" ).parent().mouseover( function () {
        var e = $(this);
        this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
    });

    $( ".sublist" ).parent().mouseout ( function () {
        if(this.timer){
            clearTimeout(this.timer);
        }
        if($(this).hasClass("li_hover")){
            $(this).toggleClass("li_hover");
        }
        $(this).find(".sublist").hide("slide", {}, 500);

    });

这是$(document).ready(). 其他代码将与上述相同。

真的。最终更新：所以，mouseover有时mouseout会导致错误，因为当我将鼠标移动到子列表时，父母的mouseover事件将被触发，并隐藏子列表。问题可以通过使用hover函数来解决：

    $( ".sublist" ).parent().hover( 
        function () {
            var e = $(this);
            this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
        },
        function () {
            if(this.timer){
                clearTimeout(this.timer);
            }
            $(this).find(".sublist").hide("slide", {}, 500);
            if($(this).hasClass("li_hover")){
                $(this).toggleClass("li_hover",300);
            }
        }
    );

谢谢大家

4

3 回答 3

2 
timeout = setTimeout('timeout_trigger()', 3000);
clearTimeout(timeout);

jQuery(document).ready(function () {
//hide a div after 3 seconds
setTimeout( "jQuery('#div').hide();",3000 );
});

参考 链接

function hover () {
$( ".sublist" ).parent().hover( function () {
$(this).toggleClass("li_hover",300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
}
setTimeout( hover,3000 );

……

于 2012-11-08T09:02:02.727 回答
2

请试试这个：

代码

setInterval(doSomthing_hover, 1000);


function doSomthing_hover() {
    $(".sublist").parent().hover(function() {

        $(this).toggleClass("li_hover", 300); //use to change the background color
        $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
    });

}​

SetTime 与 setInterval

At a fundamental level it's important to understand how JavaScript timers work. Often times they behave unintuitively because of the single thread which they are in. Let's start by examining the three functions to which we have access that can construct and manipulate timers.

var id = setTimeout(fn, delay); - Initiates a single timer which will call the specified function after the delay. The function returns a unique ID with which the timer can be canceled at a later time.

var id = setInterval(fn, delay); - Similar to setTimeout but continually calls the function (with a delay every time) until it is canceled.

clearInterval(id);, clearTimeout(id); - Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring.

In order to understand how the timers work internally there's one important concept that needs to be explored: timer delay is not guaranteed. Since all JavaScript in a browser executes on a single thread asynchronous events (such as mouse clicks and timers) are only run when there's been an opening in the execution.

Further read this: http://ejohn.org/blog/how-javascript-timers-work/

于 2012-11-08T09:02:57.717 回答
1

你可以使用.setTimeout

$(".sublist").parent().hover(function() {
    setTimeout(function() {
        $(this).toggleClass("li_hover", 300); //use to change the background color
        $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
    }, 1000);
});​
于 2012-11-08T08:58:28.793 回答