javascript - 由 add/removeClasses 组成的循环“动画”

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();

两个问题：

1. 似乎没有，removeClass()可以addClass()与delay().
2. 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();
});