Question

我有一个下拉菜单，它会在页面顶部拉伸整个宽度，因此当您将鼠标移到页面顶部时，快速进入浏览器菜单/地址栏菜单将会打开。我想对此稍加延迟，因此鼠标必须在打开前的1/2秒钟停留在菜单上。每次我将鼠标滑离页面顶部时，这将允许我不打开这个dang菜单。

$(function(){
       $(window).resize();
       $('#navigation_horiz ul li').bind('mouseenter',function(e){
    timer = setTimeout(function(){
        $('#navigation_horiz ul li').removeClass('active');
        $(this).addClass('active');
        if($(this).children('.dropdown').length>0){
            $('#navigation_horiz ul').next('.dropdown').attr('id',$(this).children('.dropdown').attr('id'));    
            $('#navigation_horiz ul').next('.dropdown').html($(this).children('.dropdown').html());
            $('#navigation_horiz ul').next('.dropdown').slideDown(500);
            $('#navigation_horiz ul').next('.dropdown').children().css('opacity',0);
            $('#navigation_horiz ul').next('.dropdown').children().animate({opacity:0},0).animate({opacity:1},800,'linear');
        }
    }, 500);
    });

    jQuery.expr[':'].focus = function( elem ) {
      return elem === document.activeElement && ( elem.type || elem.href );
    };  

    $('#navigation_horiz').bind('mouseleave',function(){
        if($('#navigation_horiz ul').next('.dropdown').children().length > 0 && $('#navigation_horiz ul').next('.dropdown').attr('id')=='dropdown_login' && ($('#navigation_horiz ul').next('.dropdown').find('input').is(":focus") || $('#navigation_horiz ul').next('.dropdown').find('select').is(":focus") )){
        }else{
            $('#navigation_horiz ul li').removeClass('active');
            $('#navigation_horiz ul').next('.dropdown').delay(600).slideUp(500);
            $('#navigation_horiz ul').next('.dropdown').children().css('opacity',0);
            $('#navigation_horiz ul').next('.dropdown').children().animate({opacity:1},0).animate({opacity:0},1000,'linear');
        }
    });

    $('#TabbedPanels1 .TabbedPanelsContentGroup').children().hide();
    $('#TabbedPanels1 .TabbedPanelsContentGroup').children(":eq(0)").show();    
    $("#TabbedPanels1 .TabbedPanelsTabGroup li").live('click',function(){
        $(this).parent('ul').next('.TabbedPanelsContentGroup').children().hide();
        $(this).parent('ul').next('.TabbedPanelsContentGroup').children(":eq("+$(this).attr('tabindex')+")").show();
    }); 
    <!--

    //-->

});

Answer 1

使用setTimeout()

 var timer;
 $('#navigation_horiz ul li').bind('mouseenter',function(e){
      timer =  setTimeout(function(){
            $('#navigation_horiz ul li').removeClass('active');
            $(this).addClass('active');
            if($(this).children('.dropdown').length>0){
                $('#navigation_horiz ul').next('.dropdown').attr('id',$(this).children('.dropdown').attr('id'));    
                $('#navigation_horiz ul').next('.dropdown').html($(this).children('.dropdown').html());
                $('#navigation_horiz ul').next('.dropdown').slideDown(500);
                $('#navigation_horiz ul').next('.dropdown').children().css('opacity',0);
                $('#navigation_horiz ul').next('.dropdown').children().animate({opacity:0},0).animate({opacity:1},800,'linear');
             }
           },1000);// 1 second delay
      }

在mouseleave上清除计时器

$('#navigation_horiz').bind('mouseleave',function(){
 clearTimeout(timer);

Answer 2

有一个简单的解决方案：在超时中包装鼠标输入函数的内容：

var timer;
$('#navigation_horiz ul li').bind('mouseenter',function(e){
    that = this; //'this' becomes the window when inside the setTimeout callback, so I store it in a variable 'that'
    timer = window.setTimeout(function(){ //Wrap the contents of the mouse enter function in a timeout.
        $('#navigation_horiz ul li').removeClass('active');
        $(that).addClass('active'); // I have replace all "$(this)"'s with "$(that)"'s
        if($(that).children('.dropdown').length>0){
            $('#navigation_horiz ul').next('.dropdown').attr('id',$(this).children('.dropdown').attr('id'));    
            $('#navigation_horiz ul').next('.dropdown').html($(this).children('.dropdown').html());
            $('#navigation_horiz ul').next('.dropdown').slideDown(500);
            $('#navigation_horiz ul').next('.dropdown').children().css('opacity',0);
            $('#navigation_horiz ul').next('.dropdown').children().animate({opacity:0},0).animate({opacity:1},800,'linear');
        }
    }, 500);
});

你应该清除mouseleave上的超时：

$('#navigation_horiz').bind('mouseleave',function(){
    window.clearTimeout(timer);
});

<强>来源（S）

MDN - window.setTimeout()

如何在此脚本中添加mouseenter函数的延迟

2 个答案: