Question

我在setTimeOut上遇到了一些麻烦，我想延迟子菜单的隐藏，但它根本不起作用.. :-(

我把工作线放在评论中。我做错了什么？

        $('ul.menu').find('li').mouseover(function() {
           $(this).children('ul, .mega-menu').css('display','block');

        }).mouseout(function() {
           setTimeout(this.children('ul, .mega-menu').style.display="none",4000); 
           /* $(this).children('ul, .mega-menu').css('display','none'); */
        });

感谢您的帮助或想法！

Answer 1

请用此隐藏延迟： -

$('ul.menu').find('li').delay(4000).fadeOut();

这将等待4秒然后隐藏

显示使用此： -

$('ul.menu').find('li').delay(6000).fadeIn();

所以你可以这样写： -

$(document).ready(function(){    
  $('ul.menu').find('li').hover(function() {
     var $megamenu = $(this).children('ul, .mega-menu'); 
     $megamenu.show();   
  },function() {
    var $megamenu = $(this).children('ul, .mega-menu');  
    $megamenu.delay(4000).fadeOut(); 
 });
});

您也可以使用fadeOut(1000)进行动画效果。

如果您想使用setTimeout，可以使用Dave Salomon个答案或：

$(document).ready(function(){    
  $('ul.menu').find('li').hover(function() {
     var $megamenu = $(this).children('ul, .mega-menu'); 
     $megamenu.show();   
  },function() {
    var $megamenu = $(this).children('ul, .mega-menu');  
    setTimeout(function(){$megamenu.hide()},"4000"); 
 });
});

希望这会有所帮助。

Answer 2

试试这个。

$('ul.menu').find('li').mouseover(function() {
    $(this).children('ul, .mega-menu').show();
}).mouseout(function() {
    $(this).children('ul, .mega-menu').hide(4000);     
});

Answer 3

您需要传递一个函数（而不是调用它）或代码传递给setTimeout的第一个参数。尝试：

var that = this;
setTimeout(function(){
    that.children('ul, .mega-menu').style.display="none";
}, 4000);

Answer 4

setTimeout(function(){...});中的范围与方法的其他部分不同。即this不同。

此外，您的代码有点不稳定。

$('ul.menu').find('li').mouseover(function() {
    var $submenu = $(this).children('ul, .mega-menu');
    $submenu.css('display','block');
}).mouseout(function() {
    var $submenu = $(this).children('ul, .mega-menu');
    setTimeout(function(){
        $submenu.hide();
    }, 4000);
});

http://jsfiddle.net/daveSalomon/hLk0s0bd/

Javascript隐藏延迟

4 个答案: