jQueryのアニメーション（異なるセレクタと異なるアクション）

Question

私は特にスクリプティングとjQueryの初心者です。私の質問に対する答えを徹底的に探そうとしたとしても、私はそれを得られませんでした。

私はサイトのための非フラッシュアニメーションのイントロを構築しています。 アニメーション部分のコード（その一部ですが、残りはこれと同じように動作します）があります。 私が必要とするのは、このアニメーションが完了した後、ページを更新せずにループする方法を理解することです。助けてください！誰かが私にヒントを与えることができれば、私はループ上でアニメーション化する必要がある

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#pic0').delay(2000).animate({opacity:1.0}, {duration: 3000, queue: true}); 
    $('#pic0-d').delay(4000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-i').delay(5000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-e').delay(6000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-n').delay(7000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-s').delay(8000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-g').delay(9000).animate({opacity:1.0}, {duration: 1700, queue: true}); 

    //this list goes on, but i figured this is enough for example purposes 


}); 


$(function() { 
    $("#enter").delay(2000).animate({opacity:1.0}, { duration: 2000, queue: true }); 

    $("#enter").hover(highlight, highlight); 
      }); 

function highlight (evt) { 
    $("#enter").toggleClass("highlighted"); 
    } 

</script> 

部品は＃1 PIC0-G通じ$ PIC0をしている....私は非常いただければ幸いです。 1つの関数ですべてのアニメーションを組み合わせる方法を見つけようとしましたが、異なるセレクタと異なるアクションを組み合わせる際に問題があります。

Answer 1

すべてのアニメーションを関数に入れて、最後のアニメーションが完了したときに呼び出すようにします（同じことがjQuery documentation for .queue()で行われていることに注意してください）。 これは次のようにすることができます：

function animateThings() { 
    $('#pic0').delay(2000).animate({opacity:1.0}, {duration: 3000, queue: true}); 
    $('#pic0-d').delay(4000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-i').delay(5000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-e').delay(6000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-n').delay(7000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-s').delay(8000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-g').delay(9000).animate({opacity:1.0}, {duration: 1700, queue: true}) 
    //more animations 
    $('selector-for-last-animation').delay(something).animate({name: value}, {duration: something, queue: true, complete: animateThings}); 
} 
animateThings(); 

Answer 2

おそらく、setTimeout（）を使用して、必要な部分をループして関数呼び出しに入れたいと思うでしょう。

例えば：そして

setTimeout(AnimationFunctionName(), 10000) 

AnimationFunctionNameの末端（AT）、再度のsetTimeoutを呼び出し、それがループします。