Question

我正在运行当前代码

我想做的是让动画无限循环怎么办？

我想再次调用相同的功能，或者我不知道是什么

完成最后一个元素时，动画会一次又一次地重复

(function($) {
$.fn.fade = function() {
        return this.each(function(index, item) {
            var $this = $(this).siblings();
            $(item).hide().stop();
            if ($(item).index() == $(this).siblings().length - 1) {
                $(item).delay(5000 * index).fadeIn('slow').delay(3500).fadeOut('slow', function() { 
                    /* here is the last element finishing  */
                });

            } else {
                $(item).delay(5000 * index).fadeIn('slow').delay(3500).fadeOut('slow');

            }
        });
    };

})(jQuery);
 $('.tst').fade();

编辑：我让动画继续运行并来检查答案所以我看到了一个奇怪的行为

如何解决这个问题

Answer 1

最直接的方法是给函数命名并再次调用它：http://jsfiddle.net/pimvdb/SxTgy/4/。

$.fn.fade = function x() {
        var _this = this; // keep the 'this' value

在最终动画之后，再次致电x，传递它拥有的this值：

x.call(_this); // same as x() but it sets the 'this' value inside it correctly

请注意，这样的“命名函数表达式”在IE8上有一定的怪癖 - 。

Answer 2

尝试this（虽然您必须熟悉插件结构）：

var elements = $('ul > li');
(function fade(idx) {
  $(elements).eq(idx || 0).fadeIn(1500).fadeOut(1500, function () {
    fade(idx < elements.length - 1 ? idx + 1 : 0);
  });
}());

如何使动画在无限循环中运行

2 个答案: