jquery hover和setTimeout/clearTimeOut

Question

我正在尝试用子菜单做菜单.这是我想要做的.

在悬停链接(#mylink)时,我想在它下面显示一个div(让我们称之为"#submenu").在鼠标离开此链接时,想要在5秒后执行一个功能.

在这个5秒的间隔中,如果我悬停我的div(#submenu)我想要clearTimeout.所以这个div在5秒后不会消失.

这是我的代码:

$(document).ready(function()
{
    $("#mylink").hover(
        function ()
        {
            $('#submenu').show();
        },
        function()
        {
            var timer = setTimeout(function(){$('#submenu').hide();}, 5000);
        }
    );

    $("#submenu").hover(
        function ()
        {
            clearTimeout(timer);
        },
        function()
        {
            $('#submenu').show();
        }
    );
}

Answer 1

SLaks有正确的答案,但要详细说明,你会把它放在var timer函数处理程序之外.请注意,此示例不会timer生成全局变量 - 它只是扩大了其范围,因此所有处理程序都可以使用它.

$(document).ready(function(){
    var timer;
    $("#mylink").hover(
        function(){
            $('#submenu').show();
        }, function(){
            timer = setTimeout(function(){$('#submenu').hide();}, 5000);
        }
    );

    $("#submenu").hover(
        function(){
            clearTimeout(timer);
        }, function(){
            $('#submenu').show();
        }
    );
}

Answer 2

var timer是一个局部变量.
它不存在于该处理程序之外.

你需要把它变成一个全局变量.