Question

我正在尝试循环添加和删除类的“动画”：

function loading() {
  $('#loading').removeClass().addClass('load0').delay(5000).removeClass().addClass('load1').delay(5000).removeClass().addClass('load2').delay(5000).removeClass().addClass('load3').delay(5000, loading);
}
loading();

两个问题：

removeClass()和addClass()似乎不能与delay()排队。
delay()似乎不接受回调函数。

我该怎么做？

Answer 1

var l = $('#loading'),
    i = 0;

(function loading() {
    l.removeClass().addClass('load' + i);
    i = ++i % 4;
    setTimeout(loading, 5000);
})();

或者我们也可以封装变量。

(function loading(l, i) {
    l.removeClass().addClass('load' + i);
    setTimeout(function() {
       loading(l, ++i % 4);
    }, 5000);
})($('#loading'), 0);

现代浏览器使它更清洁。

(function loading(l, i) {
    l.removeClass().addClass('load' + i);
    setTimeout(loading, 5000, l, ++i % 4);
})($('#loading'), 0);

Answer 2

您无法将delay用于非动画功能

使用setTimeout代替您自己的回调可能会更好。

Answer 3

如果我们尝试循环动画，为什么不使用带回调的.animate（）循环动画？

示例小提琴： http://jsfiddle.net/Culyx/fsxpZ/1/

小提琴中的“箭头”曾经只是一个图像，只是一个占位符div;但这应该是在jquery中循环动画的另一种方式。循环动画的代码：

$(document).ready(function () {

    //looping bouncing arrow animation and speed controls
    var arrowSpeed = 400;
    bounceLeft = function () {
        $(".arrow").animate({
            left: "+=50px"
        }, {
            duration: arrowSpeed,
            complete: bounceRight
        });
    }
    bounceRight = function () {
        $(".arrow").animate({
            left: "-=50px"
        }, {
            duration: arrowSpeed,
            complete: bounceLeft
        });
    }
    bounceLeft();
});

循环“动画”由添加/删除类组成

3 个答案: