Javascript 更改setInterval的间隔和所有动画一起运行

我正在处理以下包含多个图像动画的jquery。我的查询是，通过

setInterval

，我的动画不是一步一步地运行的，有时也不保持interval。有时我的第一个动画和第二个动画一起运行。我如何解决它并在特定的时间间隔内一步一步地运行我的所有三个动画？我们可以使用

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>

---

如果将setInterval存储在变量中，则可以对其进行更改

要更改时间，一种可能的解决方案是：

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

}

---

我可以举一个例子吗？我将尝试做一个例子，说明如何在每个动画之后清除我的间隔，以便所有三个动画都能正常运行。？在每个动画之后运行

changeTime（newTime）

。因此，它将被清除，并以新的时间重新设置。有没有使用该选项的示例？