jquery悬停和setTimeout/clearTimeOut

我目前正在尝试做子菜单的菜单。这是我想要做的。jquery悬停和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(); 
     } 
    ); 
}

来源

2012-04-24 Franck HAMEL

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(); 
     } 
    ); 
}

来源

2012-04-24 14:07:29 Jeff

感谢杰夫和我的作品SLaks。 – 2012-04-24 14:51:11

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

您需要将其设为全局变量。

来源

2012-04-24 14:03:20 SLaks

如果你把#submenu的#mylink你不会需要#submenu第二个事件处理中，你将有这样的事情：

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

顺便说一句，你不”为此需要jQuery。在普通的js中编写代码不会太长。

来源

2012-04-24 14:14:22

这里是我会怎么做

var timer 
$("#mylink").mouseenter(function(){clearTimeout(timer);$('#submenu').show()}) 
$("#mylink").mouseout(function(){timer = setTimeout(function(){$('#submenu').hide();}, 1000);})

来源

2012-04-24 14:14:41

jquery悬停和setTimeout/clearTimeOut

回答

相关问题