заставить функцию jQuery бесконечное повторение / цикл

Question

У меня есть эта функция:

    function animateImage() {
        for (i = 1; i < 31; i++) {

            top = (i * loadingHeight) + 'px';

            $(loadingDiv).animate({
                backgroundPosition: '0 -' + top
            }, 0).delay(50);

        }
    }

Я хочу бесконечный повтор / цикл.

Это возможно?как это сделать?

Answer 1

Вы можете позвонить animate при его завершении обратного вызова.

Например:

function runAnimation() {
    $(loadingDiv).animate({
        backgroundPosition: '0 -' + top
    }, runAnimation)
}

Answer 2

После постановки в очередь ваших изменений фона за 30 мс, вы можете просто поставить в очередь функцию для повторного запуска, например:

function animateImage() {
    var div = $(loadingDiv);
    for (i = 1; i < 31; i++) {
        var top = (i * loadingHeight) + 'px';
        div.animate({ backgroundPosition: '0 -' + top }, 0).delay(50);
    }
    div.queue(function(n) { animateImage(); n(); })
}

Для этого нужно .queue() для вызова animateImage еще раз после запуска всех других анимаций в очереди, затем он поставит в очередь еще 30 анимаций и т. Д. Другое изменение в кэше $(loadingDiv) - это просто оптимизация, не зависящее от цикла.

Answer 3

Если вы просто хотите, чтобы он анимировался таким образом, чтобы он перемещался на loadingHeight пикселей каждые 50 миллисекунд в общей сложности на 31 loadingHeights, а затем повторяется обратно в исходное положение, то вы можете сделать это за один анимационный вызовзатем повторите этот единственный вызов, как это:

(function animateImage(steps) {
    $(loadingDiv).css('backgroundPosition', '0 0');
    $(loadingDiv).animate(
        { backgroundPosition: '0 -' + (loadingHeight * steps) + 'px' },
        { duration: 50 * steps, complete: function() { animateImage(steps); } }
    );
})(31);

Общий способ сделать бесконечный или неопределенный цикл в javascript - это определить функцию, которая вызывает себя немедленно, а затем периодически, как это:

(function someName() {
  // do some stuff
  // then after some delay (setTimeout or animate delay, etc...), call:
  someName();
})();