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

我有一个下拉菜单，它在页面顶部延伸整个宽度，所以当您将鼠标从页面顶部移到浏览器菜单/地址栏上时，菜单将快速打开。我想稍微延迟一下，所以鼠标必须在菜单上停留1/2秒才能打开。这将使我不必每次将鼠标滑离页面顶部时都打开这个该死的菜单

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

    //-->

});

$（函数（）{
$（窗口）.resize（）；
$（'navigation_horiz ul li'）.bind（'mouseenter'，function（e）{
计时器=设置超时（函数（）{
$（'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）{
返回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 ul）。next（'dropdown'）.find'）.find（'input'）.is（'focus）是（'focus）| |（'navigation_horiz ul ul'）。next（'dropdown'）。find'）。find（'select'）。是：focus是{
}否则{
$（'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（'单击'，函数（））{
$（this）.parent（'ul'）.next（'.TabbedPanelsContentGroup'）.children（）.hide（）；
$（this）.parent（'ul'）.next（'.TabbedPanelsContentGroup'）.children（“：eq（+$（this）.attr（'tabindex'）+”））.show（）；
}); 
});

使用

设置超时（）

在鼠标上清除计时器

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

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

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

来源

已添加到脚本中，但菜单甚至不会打开now@user2250423我不知道为什么-尝试将setTimeout分配给一个变量（见上文），这可能就是问题所在。还要确保不要复制7粘贴我的代码，因为这样你就依赖于我不会打字（我经常这样做。）对不起，但我对js/jquery一无所知，所以除非它是复制/粘贴，否则我不知道我在做什么…没什么…我用你的更改编辑了我的原始问题，你看到有什么问题吗？会把它放到JFIDLE中，给我一分钟的时间，但菜单现在根本不会打开，你有我的原始文章的完整编辑，看看我是否正确地实现了这一点吗？
$('#navigation_horiz').bind('mouseleave',function(){
    window.clearTimeout(timer);
});