更改setInterval的間隔和所有動畫一起運行

Question

我正在處理以下包含多個圖像動畫的jquery。我的查詢是通過setInterval，我的動畫不是一步一步地運行，並且它有時不保持間隔。有時我的第一部動畫和第二部動畫一起運行。我如何解決它，並在特定的時間間隔內逐步運行我的三個動畫？我們可以使用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，你將能夠改變它。

要更改時間一個可能的解決方案是：

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

}