javascript - 更改 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);

}