jQuery的延遲和重複功能

我想重複一個簡單的圖片上的動畫，我已經用setinterval函數輕鬆完成了。但我也想在頁面加載後延遲5秒的重複。jQuery的延遲和重複功能

現在我有這樣的：

setInterval(function(){ 
    $("#arrow").fadeToggle(400); 
}, 1000);

而且我想推遲這樣的動畫，但它不工作：

setTimeout(
    setInterval(function(){ 
     $("#arrow").fadeToggle(400); 
    }, 1000); 
, 5000);

有沒有一種簡單的方法來做到這一點？

來源

2014-08-31 user3250328

你在正確的軌道上。嘗試把它變成一個函數，然後拖延。

function fader() { 
    setInterval(function(){ 
     $("#arrow").fadeToggle(400); 
    }, 1000); 
} 
setTimeout(fader, 5000);

來源

2014-08-31 21:26:08

正是我想要的，謝謝！ – user3250328 2014-09-07 23:09:32

我認爲setTimeout的是好的，但你可以有它拖延通過itselft一秒鐘fadeToggle函數調用自身時完成（遞歸）

function arrowFadeToggle(){ 
    $("#arrow").fadeToggle(1000,arrowFadeToggle); 
} 

setTimeout(arrowFadeToggle,5000);

Demo

來源

2014-08-31 21:28:01 andrew

在使用setInterval（在你的情況）。通過這就是如何使用這兩種方式：

setTimeout(function(){ 

setInterval(function() { 
console.log("Hi There I'll wait 10 seconds to start first time") 
         }, 3000); 

},7000)

來源

2014-08-31 21:31:07

當心的是，setInterval最終可能導致您的動畫不同步。特別是問題是無論動畫是否完成，setInterval都會觸發。在這種情況下，這不是什麼大不了的事情，但如果延遲較小，這可能會成爲一個問題。

更健壯的方式做到這一點，將是：

function animateFade() { 
    $('#arrow').fadeToggle(400).delay(600).promise().done(animateFade); 
} 

// Put this in your document ready handler, handles your initial delay 
setTimeout(animateFade, 5000);

的animateFade功能調用自身與延遲動畫結束之後。這保證你永遠不會有兩個函數在同一時間運行（並且你的動畫永遠不會失去同步）。

JSFiddle example

來源

2014-08-31 21:56:55 martineno

jQuery的延遲和重複功能

回答

相關問題