Как сохранить мое время интервала используя setInterval?

Я построил следующий jQuery для анимации изображений в цикле с помощью setInterval().

$(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>

1 ответ

  1. Изменить
    (завершить новый ответ)

    Сегодня я снова проверил ваш сценарий.

    Проблема возникает из-за того, что вы используете .animate()в обратном вызове an .animate()
    Кроме того, в пределах обратного вызова обратного вызова .animate()(3-го уровня).

    Я добавил некоторые console.log()в вашей скрипке, чтобы показать, что анимация не происходит в том порядке, я полагаю, вы хотите, чтобы это было.
    (Нажмите [F12] на клавиатуре, чтобы посмотреть на консоль)

    Обратите внимание, что сообщение «animation #3» появляется слишком много раз.
    Полагаю, это связано с каким-то внутренним событием jQuery animation ended, которое «пузыри».

    Также обратите внимание, что» анимация #4 » появляется слишком рано.
    Это связано с тем, что он не ждет завершения всех обратных вызовов «animation #1».
    Он срабатывает почти одновременно с «анимацией №1».

    Так…

    Эта анимация, на мой взгляд, не может быть достигнута таким образом.
    Вам лучше использовать CSS @keyframes.
    Я сделал еще одну скрипку, чтобы показать вам, как.

    Данный 3 изображения, который нужно показать по-одному, 6 секунд каждое:
    100% тогда будет 18 секунд.
    Вы должны разделить 100% анимации на 3, что составляет 33%.

    Таким образом, первые 33% должны анимировать изображение кулака.
    От 33% до 66% для второго изображения.
    66% к 100% для третьего изображения.

    Разделите эти «33%» частей достичь анимации на каждом изображении.
    Как 5% к fadein, 10% для того чтобы двинуть…