jQuery懸停與setTimeout（與hoverIntent相反）

我有一組圖像，每個我想翻轉和閃爍到不同的圖像半秒左右，然後恢復到原始圖像，即使鼠標仍然在圖像（即沒有鼠標）jQuery懸停與setTimeout（與hoverIntent相反）

setTimeout被建議，但我不知道如何正確使用它。

有頁面的一個例子....我只是想上出現翻轉圖像出現然後再次迅速消失。

我已經搜遍了網頁的例子，找不到任何東西......任何幫助將不勝感激。

感謝，安德魯

編輯：

這是我目前使用懸停圖片代碼

$(document).ready(function(){ 
$(function() { 
    $('.rollover').hover(function() { 
     var currentImg = $(this).attr('src'); 
     $(this).attr('src', $(this).attr('hover')); 
     $(this).attr('hover', currentImg); 
    }, function() { 
     var currentImg = $(this).attr('src'); 
     $(this).attr('src', $(this).attr('hover')); 
     $(this).attr('hover', currentImg); 
    }); 
});

}）;

來源

2010-05-11 Andrew Cassidy

我理解的對不對？鼠標進入圖像，圖像改變幾秒鐘，並再次回到前一張圖像。當鼠標移出圖像時沒有任何反應？ – meo 2010-05-11 17:44:35

是的，就是這樣。 – 2010-05-11 18:17:23

使用setTimeout很容易。它將函數作爲第一個參數 - 就像許多jQuery方法 - 以秒爲單位的時間。

我從你的代碼開始並重構了一下。最初，如果在定時器啓動之前，用戶將鼠標懸停在圖像上方，遠離並返回圖像，則可能會出現競態條件。現在，切換到備用圖像並返回到原始圖像的邏輯是分開的。如果圖像已被換出，則鼠標懸停處理程序也會短路。我還緩存了由$(this)返回的jQuery對象，稍微提高了速度（緩存jQuery對象是很好的做法）。

我改變了hover屬性data-hover（HTML5規範，您可以使用自定義屬性，但要求他們開始與data-），並檢查其在鼠標懸停選擇presense。

最後，我刪除了額外的ready包裝（$(document).ready(function(){…})和$(function(){…}是一樣的，不需要兩者都有）。

$(function() { 
    $('.rollover[data-hover]').mouseover(function() { 
     var $this = $(this), originalImage = $this.attr('src'); 
     if ($this.data('imagesSwapped')) { 
      return; 
     } 
     $this.attr('src', $this.attr('data-hover')).data('imagesSwapped', true); 
     setTimeout(function(){ 
      $this.attr('src', originalImage).removeData('imagesSwapped'); 
     }, 500); 
    }); 
});

該代碼尚未經過測試。

來源

2010-05-11 17:58:48 s4y

非常感謝你Sidnicious。這很好，你非常有幫助，謝謝。 – 2010-05-11 18:23:38

在這裏你可以找到一些明顯的例子：

http://www.electrictoolbox.com/using-settimeout-javascript/

但我個人建議你使用定時器插件，它是更友好的使用： http://jquery.offput.ca/every/

來源

2010-05-11 16:36:56 mamoo

喜歡的東西

$('#myid').hover(function() { 
    $(this).addClass('hovered'); 
    setTimeout(function() { $('#myid').removeClass('hovered'); }, 100); 
});

來源

2010-05-11 16:43:34 scaryzet

感謝Scaryzet，我很初學者...這是我目前使用 http://thepool.ie/rollover.js 如果你能告訴我在哪裏添加你的代碼的代碼這表明它會很棒。非常感謝。 Andrew – 2010-05-11 17:16:50

嗨，代碼現在工作，非常感謝您的幫助。 – 2010-05-11 18:24:09

有更好的辦法是setTimeout的

可以使用$('.rollover').mouseenter(function() {代替$('.rollover').hover(function() {http://api.jquery.com/mouseenter/

來源

2012-11-19 07:09:41

jQuery懸停與setTimeout（與hoverIntent相反）

回答

相關問題