アニメーション間の遅延

Question

アニメーションの各セットの先頭に遅延を追加しようとしています。アニメーションは正常に動作しますが、アニメーションの前に.delay（5000）を追加すると何も動作しません。

$(document).ready(function(){ 

    -->add .delay here <--- 

    $("#hand").animate({left:'-=300px'},1500); 
    $("#hand").animate({left:'+=300px'},1000); 

    -->add .delay here <--- 

    $("#hand").animate({left:'-=300px'},1500 ); 
    $("#hand").animate({left:'+=300px'},1000); 

    $("#hand").animate({left:'-=300px'},1500 ); 
    $("#hand").animate({left:'+=300px'},1000); 

    }); 

ここで同じ機能に使用するコードは1セットありますか？無限にアニメートする必要があります。あなたはに持って

Answer 1

は、アニメーション/遅延コールの連鎖を使用することができます - 例：animate()コール自体が非ブロッキングであること

$("#hand").animate({left:'-=300px'},1500) 
      .delay(5000) 
      .animate({left:'+=300px'},1500); 

注意をあなたがdelay()呼び出しで、そのために対応する必要がありますのでまたはコードを補完ハンドラに移動してください。 これを見るworking JSFiddle example

setInterval(function() { 
    $("#hand").animate({ left: '-=300px'}, 1500) 
       .delay(5000) 
       .animate({left: '+=300px'}, 1000); 
}, 10000); 

Answer 2

あなたは無限にあなたのアニメーションループを作るために、再帰関数呼び出しを行うことができます。あなただけのsetInterval()にそれをラップすることができ、「永遠に」、この実行を行うために

。

function recursive_animation() { 
    $("#hand").delay(3000) 
     .animate({left:'-=300px'},1500) 
     .animate({left:'+=300px'},1000, recursive_animation); 
} 

recursive_animation(); 

例：http://jsfiddle.net/j3LLe/