如何將這個腳本中添加上了mouseenter功能延遲

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 
     } 

在鼠標離開清零定時器

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

您應該清除超時的鼠標離開：

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

來源（S）

MDN - window.setTimeout()