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分50秒背景更改后，您可以将该功能排队再次运行，如下所示：

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个动画，等等。另一个更改为缓存{{ 1}}只是一个优化，它独立于循环。

Answer 3

如果你只是希望它设置动画，使其每50毫秒移动loadingHeight像素，总共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();
})();

强制jQuery函数无限重复/循环

3 个答案: