JQuery. Оживить с функцией времени

Question

он, ребята ...

Я использую этот маленький фрагмент кода для jquery:

function updown() {
    $('#red').animate({top:'+=100'}, 5000, function() {
        $('#red').animate({top:'-=100'},5000, function(){
            updown();
        });
    });
}

updown();

(для движения вправо я использую спрайт)

и получите такой результат:

но я хочу вот так:

есть ли способ осознать это?

С уважением, bernte

Answer 1

Конечно, вы можете использовать jQuery delay() или Javascript's setTimeout, вот первое:

function updown() {
    $('#red').delay(7000).animate({top:'+=100'}, 5000, function() {
        $('#red').delay(3000).animate({top:'-=100'},5000, function(){
            updown();
        });
    });
}

Answer 2

function updown() {
    $('#red').delay(3000).animate({top:'+=100'}, 5000, function() {
        $('#red').delay(7000).animate({top:'-=100'},5000, updown});
    });
}

updown();

Задержка - это то, что вы хотите. Вызовите, как пример выше, анализируя время, которое вы хотите подождать, прежде чем выполнить следующий запрос анимации. Будьте осторожны, задержка работает только с анимацией. Если вы делаете, например:

$("#red").delay(1000).css("display", "none");

.css () будет вызываться немедленно, а не через 1000 мс.