Wechselintervall von setInterval und alle Animationen werden zusammen

Question

Ich habe mit folgenden jquery zu tun, die mehrere Bildanimationen enthält. Meine Abfrage ist, durch setInterval, meine Animation wird nicht Schritt für Schritt ausgeführt und es nicht manchmal Intervall beibehalten. Manchmal läuft meine 1. Animation und 2. Animation zusammen. Wie kann ich es lösen und meine alle drei Animationen Schritt für Schritt in bestimmten Intervallen ausführen? Können wir setTimeout verwenden? Wenn ja, wie? Bitte entschuldigen Sie, wenn ich in jQuery falsche Intervallzeit geschrieben habe, da ich Anfänger in jQuery bin.

$(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); 
}); 

Meine html ist wie folgt:

<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

Wenn Sie die setInterval in einer Variablen speichern können Sie es ändern.

Um die Zeit eine mögliche Lösung ist zu ändern:

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

}