jquery hover和setTimeout / clearTimeOut

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

在悬停链接(#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();
        }
    );
}

解决方法

SLaks有正确的答案,但要详细说明,你可以将var 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();
        }
    );
}