jquery排隊延遲的動畫序列;需要重複

我需要下面的代碼來激活一系列圖片，然後運行，然後無限期地重複。目前它在頁面加載，然後剛剛結束。看動畫的網址是：http://marisspillanewines.com/dev/jquery排隊延遲的動畫序列;需要重複

謝謝！ Mona

$(document).ready(function(){ 
    $("#cork_CU").animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true }); 
    $("#fisherman_CU").delay(4800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true }); 
    $("#maris_CU").delay(8800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true }); 
    $("#capsule_CU").delay(12800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true }); 
    $("#numbers_CU").delay(16800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true }); 
    $("#fisherman_CU").delay(4800).animate({left: '-700px',top:'600px'}, { duration: 0, queue: true, ease:true }); 
    $("#maris_CU").delay(4800).animate({left: '-700px',top:'-600px'}, { duration: 0, queue: true, ease:true }); 
    $("#cork_CU").delay(4800).animate({left: '700px',top:'600px'}, { duration: 0, queue: true, ease:true }); 
    $("#capsule_CU").delay(4800).animate({left: '700px',top:'-600px'}, { duration: 0, queue: true, ease:true }); 
    $("#numbers_CU").delay(4800).animate({left: '700px',top:'-600px'}, { duration: 0, queue: true, ease:true }); 
});

來源

2012-10-03 Mona Reilly

這裏是鏈接：http://marisspillanewines.com/dev/ –

它應該做什麼？清理你的問題，所以它只是對問題的描述，而不是你期望它做的事情和源頭。我們很樂意提供幫助，只需告訴我們您正在嘗試做什麼。 –

你目前的做法似乎不可能。嘗試抽象動畫所需的不同部分，您可能需要創建一個易於使用的jQuery插件。不要硬編碼值，動態計算偏移等... – elclanrs

對於jQuery中的這樣的計時問題，有一個plugin jQuery-timing。它將您的代碼縮短爲以下內容。我建議給圖像一個常見的CSS類，例如「pic」：

var startLeft = $('.pic').each().css('left'), 
    startTop = $('.pic').each().css('top'), 
    targetPos = {left:-20,top:-20}; 

var $frame = $('.pic').parent(); 

function setBack(index) { 
    this.css({left:startLeft[index], top:startTop[index]}).appendTo($frame); 
} 

$(".pic").repeat().each($).then(setBack).animate(targetPos,600).wait(4000);

該解決方案非常通用，因爲它不依賴於幀中圖像的實際數量。

通過使用.appendTo（$ frame）我們可以確保動畫圖像始終是最頂層的。

.repeat()是來自該擴展的定時方法，以及通過.each($)的順序循環以及延遲功能.wait(timeout)。

要收集起始位置，我使用了短語法與並行.each()。

來源

2012-10-04 07:16:48 peter

非常感謝你。並感謝您的好解釋。我已經實現了它，但我必須有錯誤。你可以看看我的代碼，看看我是否做得對嗎？ http://marisspillanewines.com/dev/ –

嗨莫娜。我忘了周圍塊$（function（）{...}）;這使代碼在DOM準備好的事件上運行。目前，當不存在「.pic」元素時，它開始循環。 – peter

另一件事：ssrc =「images/maris_CU.jpg」 - 在ssrc中有一個「s」太多。 – peter

jquery排隊延遲的動畫序列;需要重複

回答

相關問題