如何使用setInterval保存我的间隔时间？

Question

我使用setInterval()在循环中为图像动画构建了以下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);
});

当前，此jQuery循环运行，并逐个动画给不同的图像。 现在，有时所有这些动画都一起运行，并且不保持特定的时间间隔。 我想在浏览器中完美地一次显示所有动画。 我的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

编辑
（完成新答案）

我今天再次检查了您的脚本。

这个问题是从您使用的事实.animate()的回调中.animate() ...
此外，在.animate()的回调的回调中（第3级）。

我在您的小提琴中添加了一些console.log()以表明动画并未按照我希望的顺序出现。
（按键盘上的[F12]以查看控制台）

请注意，消息“动画＃3”出现了太多次。
我想这是由于某些内部jQuery 动画结束事件“起泡”所致。

另请注意，“动画4”出现得太早了。
这是因为它不等待“动画＃1”的所有回调结束。
它几乎与“动画＃1”同时触发。

所以...

我认为这种动画无法以这种方式实现。
您最好使用CSS @keyframes 。
我做了另一个小提琴 ，向您展示了如何。

假设有3张图片一张一张地显示，每张6秒：
100％将是18秒。
您必须将动画的100％除以3，即33％。

因此，前33％是为拳头图像设置动画。
第二张图片占33％到66％。
第三张图片占66％到100％。

将这些“ 33％”部分分开，可以在每个图像上实现动画效果。
像5％的淡入，10％的移动...