2012-01-10 273 views
2

期間jQuery的效果我的網站有一些圖標在鼠標發光,但我想它隨機亮起時,沒有人徘徊。暫停執行

現在我有了一段正確的代碼,它會隨機發光並在懸停發光,但如何使隨機發光停止並在人物懸停在圖標上後恢復。

謝謝。

回答

1

因爲我們還沒有提供太多的信息,這就是我想這樣做的:

  1. 創建發光圖標
  2. 創建一個隨機圖標
  3. 創建一個定時器調用發光功能的其他功能的功能(間隔)以設定的時間間隔繼續呼叫隨機發光功能
  4. 附加一個圖標的mouseenter事件,使其在啓動時清除計時器並僅在該圖標上調用發光。當鼠標懸停時,它啓動一個新的計時器。 (定時器是全球的)
1

您可以使用.stop()來停止任何現有的效果。

但是沒有任何方法可以讓恢復這些效果一旦你的懸停開始的附加效果完成了。

您必須重新啓動第二個.hover()回調中的「隨機」發光。

編輯可能是可能的,但是這是未經測試:

  1. 呼叫.queue()來得到當前的動畫隊列,並複製結果
  2. 呼叫.stop()刪除所有這些
  3. 做你的新動畫
  4. .hover()的「出」功能,重新從#1以上排隊的項目
+0

謝謝Alnitak,你的建議很有道理。讓我試試看。 – 2012-01-10 08:26:24

+0

@JamesWong看到http://jsfiddle.net/alnitak/mS99A/ - 這是_mostly_工作。然而這是不可能恢復的「INPROGRESS」的動畫,如果有什麼人離開整個動畫停止之後。您需要檢查產生的隊列,並且如果沒有其他事項,請重新啓動隨機動畫。 – Alnitak 2012-01-10 08:36:09

0

您可以檢查,看看他們是否圖標泛着你容光煥發之前:

$('.icon').hover(function() { 
    $(this).stop(true, true); 
    $(this).toggleClass('glow', true); 
}, function() { 
    $(this).stop(true, true); 
    $(this).toggleClass('glow', false); 
}); 

function randomglow(icon) { 
    if (!$(icon).hasClass('glow')) { 
     //your glow code here 
    } 
}