setIntervalの間隔を変更するとすべてのアニメーションが一緒に実行されます

Question

私は複数の画像アニメーションを含む次のjqueryを扱っています。私のクエリはsetIntervalを通して、私のアニメーションはステップバイステップで実行されず、時々間隔を維持しません。時々私の第1アニメーションと第2アニメーションが一緒に実行されます。どのように私はそれを解決し、特定の間隔で私の3つのアニメーションをステップバイステップで実行することができますか？ setTimeoutを使用できますか？もしそうなら、どうですか？私がjqueryを初心者にしているので、jqueryの後に間違った間隔の時間を書いてしまったら、私を許してください。

$(document).ready(function() { 
var runAnimate1 = true; 
var runAnimate2 = false; 
var runAnimate3 = false; 

setInterval(function() { 
    if (runAnimate1) { 
     $("#animate1").fadeIn('slow').animate({ 
      'display': 'inline-block', 
      'margin-left': '220px', 
      'margin-bottom': '20px' 
     }, 500, function() { 
      $('.1st').animate({ 
       'opacity': '0' 
      }, 1000, function() { 
       $('.1st').animate({ 
        'opacity': '1' 
       }) 
      }) 
     }).fadeOut(); 
     $("#animate1").fadeIn('slow').animate({ 
      'margin-bottom': '0px', 
      'margin-left': '-140px' 
     }, 1000, function() { 
      runAnimate1 = false; 
      runAnimate2 = true; 
      runAnimate3 = false; 
     }).fadeOut('slow'); 
    } 

    if (runAnimate2) { 
     $(".2nd").fadeIn('slow').animate({ 
      'margin-left': '150px', 
      'margin-bottom': '2px' 
     }, 600, function() { 
      $('.1st').animate({ 
       'opacity': '0' 
      }, 1000, function() { 
       $('.1st').animate({ 
        'opacity': '1' 
       }, 1000) 
      }) 
     }).fadeOut(); 
     $(".2nd").fadeIn('slow').animate({ 
      'margin-bottom': '0px', 
      'margin-left': '-150px' 
     }, 1000, function() { 
      runAnimate1 = false; 
      runAnimate2 = false; 
      runAnimate3 = true 
     }).fadeOut('slow'); 
    } 

    if (runAnimate3) { 
     $('.3rd').fadeIn('slow').animate({ 
      'display': 'inline-block', 
      'margin-left': '220px', 
      'margin-bottom': '2px' 
     }, 1000, function() { 
      $('.1st').animate({ 
       'opacity': '0' 
      }, 1000, function() { 
       $('.1st').animate({ 
        'opacity': '1' 
       }) 
      }) 
     }).fadeOut('slow'); 
     $('.3rd').fadeIn('slow').animate({ 
      'margin-bottom': '0px', 
      'margin-left': '-220px' 
     }, 1000, function() { 
      runAnimate1 = true; 
      runAnimate2 = false; 
      runAnimate3 = false; 
     }).fadeOut('slow'); 
    } 
}, 6000); 
}); 

私のHTMLは以下の通りです：

<div id="outer-box" class="1st"> 
<img class="1st" src="img/sofa2.jpg"> 
<div id="animate1" style="display: none; position: absolute; bottom: 0; left: 0;"> 
    <img class="1st" src="img/chotu.png" style="height:300px; width:200px;" /> 
</div> 
<div class="2nd 1st" style="display:none; position:absolute; bottom:0; left:0"> 
    <img src="img/hand.png" style="width:200px; height:300px;"> 
</div> 
<div class="3rd 1st" style="display:none; position:absolute; bottom:0; left:0"> 
    <img src="img/handyh.png" style="width:180px; height: 150px;"> 
</div> 
</div> 

Answer 1

あなたは変数にするsetIntervalを保存する場合は、あなたがそれを変更することができます。

時間を変更するための1つの可能な解決策は以下のとおりです。

var interval = setInterval(functionName,3000); 
function changeTime(newTime) { 
    clearInterval(interval); 
    interval = setInterval(functionName,newTime); 

}