如何推遲jquery懸停事件

我想推遲jquery懸停事件。下面的代碼是我正在使用的代碼。如何推遲jquery懸停事件

$(document).ready(function(){ 

     $('ul.tabs li').hover(function(){ 
      var tab_id = $(this).attr('data-tab'); 

      $('ul.tabs li').removeClass('current'); 
      $('.tab-content').removeClass('current'); 

      $(this).addClass('current'); 
      $("#"+tab_id).addClass('current'); 
     }) 

    })

我曾嘗試將其更改爲以下代碼無濟於事。

var delay=1000, setTimeoutConst; 
    $('ul.tabs li').on('hover', function() { 
     setTimeoutConst = setTimeout(function(){ 
       var tab_id = $(this).attr('data-tab'); 

     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 

     $(this).addClass('current'); 
     $("#"+tab_id).addClass('current'); 

     }, delay); 
    }, function(){ 
     clearTimeout(setTimeoutConst); 

     });

這裏是我的html代碼

<div class="container"> 

<ul class="tabs"> 
    <li class="tab-link current" data-tab="tab-1">Tab One</li> 
    <li class="tab-link" data-tab="tab-2">Tab Two</li> 
    <li class="tab-link" data-tab="tab-3">Tab Three</li> 
    <li class="tab-link" data-tab="tab-4">Tab Four</li> 
</ul> 

<div id="tab-1" class="tab-content current"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div> 
<div id="tab-2" class="tab-content"> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 
<div id="tab-3" class="tab-content"> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</div> 
<div id="tab-4" class="tab-content"> 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div>

我仍然在jQuery的初學者，所以我不知道該怎麼辦。一些幫助會有幫助。感謝

來源

2015-10-15 Brad Duncan

第二部分應該工作，但你必須用'mouseenter'改變'hover'事件。這是因爲懸停事件是多次觸發的，而不是一次觸發mouseenter。 –

你發佈的html代碼也 –

它已經基於'mouseenter'和'mouseleave'，@Matei Mihai。第一個代碼中的錯誤是'.hover（）'總是需要第二個函數 - 這是缺少的。另外，它不能與'.on（）'結合使用。 – Shikkediel

使用on('hover')是一個壞主意，而不是你應該使用.hover()或on('mouseenter')和on('mouseleave')。

以下代碼適用於我，請注意，您不能在超時函數中使用this，將id存儲到變量中會解決該問題。

我假設你想取消超時，如果鼠標離開之前延遲已經過期，這就是爲什麼我刪除mouseleave超時。

http://jsfiddle.net/k4wm1jr5/19/

var delay=1000, setTimeoutConst; 
var tab_id, tab_id_this; 

$(document).on("mouseenter", "ul.tabs li", function() { 
    console.log("MOUSEENTER"); 
    tab_id = $(this).attr('data-tab'); 
    tab_id_this = $(this).attr('id'); 
    setTimeoutConst = setTimeout(function(){ 
       //Do whatever you like here 
       //your code would be approximate like this: 

       $('ul.tabs li').removeClass('current'); 
       $('.tab-content').removeClass('current'); 

       $("#"+tab_id_this).addClass('current'); 
       $("#"+tab_id).addClass('current'); 
     }, delay); 
}); 
$(document).on("mouseleave", "ul.tabs li", function() { 
    clearTimeout(setTimeoutConst); 
});

on('hover')是一個壞主意，因爲：

jQuery的1.8不推薦使用，在1.9中刪除：用作簡寫命名爲「懸停」字符串「mouseenter mouseleave」。它爲這兩個事件附加一個事件處理程序，並且處理程序必須檢查event.type以確定事件是mouseenter還是mouseleave。不要將「懸停」僞事件名稱與接受一個或兩個函數的.hover（）方法混淆。

請參閱documentation。

來源

2015-10-15 07:58:27

的作品就像一個炸彈...謝謝： d –

我會用$.hoverDelay() plugin那樣做。它允許您配置「中」和「出」的事件，像這樣的延遲（S）：

$('ul.tabs li').hoverDelay({ 
    delayIn: 200, 
    delayOut:700, 
    handlerIn: function($element){ 
    $element.css({backgroundColor: 'red'}); 
    }, 
    handlerOut: function($element){ 
    $element.css({backgroundColor: 'auto'}); 
    } 
});

來源

2016-02-25 10:06:53

如何推遲jquery懸停事件

回答

相關問題