0

我有一个下拉菜单，它将整个宽度延伸到页面顶部，因此当您将鼠标从页面顶部移开时，会快速打开浏览器菜单/地址栏。我想稍微延迟一下，所以鼠标必须在打开前 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();
    }); 
    <!--

    //-->

});
4

2 回答 2

0

利用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
      }

在鼠标离开时清除计时器

$('#navigation_horiz').bind('mouseleave',function(){
 clearTimeout(timer);
于 2013-04-17T13:38:50.390 回答
0

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

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

来源

MDN - window.setTimeout()

于 2013-04-17T13:39:04.433 回答