所以...

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级）的回调中。

我已在your Fiddle中添加了一些console.log()，以表明动画不按我认为您想要的顺序发生。
（按键盘上的[F12]查看控制台）

请注意消息＆＃34;动画＃3＆＃34;出现太多次了。
我想这是由于一些内部jQuery 动画结束事件导致＆＃34;起泡＆＃34;。

还要注意＆＃34;动画＃4＆＃34;太快了。
这是因为它不会等待＆＃34;动画＃1＆＃34;的所有回调。结束它几乎与动画＃1＆＃34;。
同时触发
所以...

在我看来，这个动画无法通过这种方式实现您最好使用CSS @keyframes 我让another Fiddle告诉你如何。

鉴于有3张图像逐一显示，每张6秒：
100％将是18秒你必须将动画的100％除以3，即33％。

所以前33％是为第一张图像制作动画第二张图片的比例为33％至66％第三张图片为66％至100％。

除以这些＆＃34; 33％＆＃34;零件在每张图像上实现动画像5％的fadein，10％的移动......

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

1 个答案:

所以...