延遲jquery懸停事件？

我想推遲jquery中的懸停事件。當用戶將鼠標懸停在鏈接或標籤上時，我正在從文件中讀取數據。如果用戶只是在屏幕上移動鼠標，我不希望此事件立即發生。有沒有辦法延遲事件發生？延遲jquery懸停事件？

謝謝。

示例代碼：

$(function() { 
    $('#container a').hover(function() { 
     $('<div id="fileinfo" />').load('ReadTextFileX.aspx', 
      {filename:'file.txt'}, 
      function() { 
       $(this).appendTo('#info'); 
      } 
     ); 
    }, 
     function() { $('#info').remove(); } 
    }); 
});

UPDATE：（09年1月14日） 加入HoverIntent插件上面的代碼後，變爲以下來實現它。實施起來非常簡單。

$(function() { 
    hiConfig = { 
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher) 
     interval: 200, // number = milliseconds for onMouseOver polling interval 
     timeout: 200, // number = milliseconds delay before onMouseOut 
     over: function() { 
      $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'}, 
       function() { 
        $(this).appendTo('#info'); 
       } 
      ); 
     }, // function = onMouseOver callback (REQUIRED) 
     out: function() { $('#info').remove(); } // function = onMouseOut callback (REQUIRED) 
    } 
    $('#container a').hoverIntent(hiConfig) 
}

來源

2009-01-12 Brettski

感謝爲hoverIntent – JavaKungFu 2014-12-18 00:37:41

使用hoverIntent的jQuery插件：http://cherne.net/brian/resources/jquery.hoverIntent.html

這對你的描述絕對完美的，我已經用它在幾乎所有所需的菜單等的鼠標懸停激活項目...

這種方法有一個問題，一些接口沒有「懸停」狀態，例如。移動瀏覽器，如iphone上的safari。您可能隱藏了界面或導航的重要部分，無法在此類設備上打開它。你可以用設備特定的CSS來解決這個問題。

來源

2009-01-12 15:31:16 roborourke

提供使用或這個插件作品也像一個魅力https：//開頭github.com/john-terenzio/jQuery-Hover-Delay – mica 2016-08-31 15:10:00

您可以在mouseout事件中使用帶有clearTimeout（）的setTimeout（）調用。

來源

2009-01-12 15:32:21

您需要檢查懸停時的計時器。如果它不存在（即這是第一個懸停），請創建它。如果它存在（即，這是第一次懸停的而不是），請殺死它並重新啓動它。將計時器有效負載設置爲您的代碼。

$(function() { 
    var timer; 

    $('#container a').hover(function() { 
     if(timer) { 
      clearTimeout(timer); 
      timer = null 
     } 
     timer = setTimeout(function() { 
      $('<div id="fileinfo" />').load('ReadTextFileX.aspx', 
       {filename:'file.txt'}, 
       function() { 
        $(this).appendTo('#info'); 
       } 
      ); 
     }, 500) 
    }, 
    // mouse out 
    }); 
});

我敢打賭，jQuery有一個功能，它包裝了這一切爲你。

編輯：是啊，jQuery plugin to the rescue

來源

2009-01-12 15:40:28

無論如何，非插件解決方案！ – Jrgns 2010-10-21 09:42:22

我加了一個clearTimeout（定時器）;計時器= NULL;在鼠標方面，但是，這工作完美，避免亞普（又一個插件） – Andiih 2012-01-16 17:10:53

-2

我的解決辦法是容易的。延遲打開的菜單，如果用戶在300毫秒的OBJ保持了mouseenter：

var sleep = 0; 
$('#category li').mouseenter(function() { 
    sleep = 1; 
    $('#category li').mouseleave(function() { 
     sleep = 0; 
    }); 
    var ob = $(this); 
    setTimeout(function() {       
     if(sleep) { 
      // [...] Example: 
      $('#'+ob.attr('rel')).show(); 
     } 
    }, 300); 
});

來源

2011-09-02 10:37:23 onekamil

完全同意hoverIntent是最好的解決辦法，但如果你碰巧是一個不幸的草皮誰在網站上的作品以供審批長期持久的過程jQuery插件，這裏有一個快速和骯髒的解決方案，它爲我工作得好：

$('li.contracted').hover(function() { 
    var expanding = $(this); 
    var timer = window.setTimeout(function() { 
     expanding.data('timerid', null); 

      ... do stuff 

    }, 300); 
    //store ID of newly created timer in DOM object 
    expanding.data('timerid', timer); 
}, function() { 
    var timerid = $(this).data('timerid'); 
    if (timerid != null) { 
     //mouse out, didn't timeout. Kill previously started timer 
     window.clearTimeout(timerid); 
    } 
});

這一個只是用於擴展<李>如果鼠標已在其上的時間超過300毫秒。

來源

2011-12-08 14:25:42

在2016年之前，預期爲我新月新鮮的解決方案沒有工作，所以我想出了這個：

$(selector).hover(function() { 
    hovered = true; 
    setTimeout(function() { 
     if(hovered) { 
      //do stuff 
     } 
    }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay 

}, function() { 
    hovered = false; 
});

來源

2016-04-09 13:32:13

延遲jquery懸停事件？

回答

相關問題