jQuery 无限（循环）答案

【问题标题】：jQuery Infinite (Loop)jQuery 无限（循环）
【发布时间】：2012-11-06 19:23:22
【问题描述】：

我找到了很多关于无限循环的文档，但是有多种方法，但没有任何东西能真正解释它，这使得我的代码难以实现。

我希望以两种方式使用它：

水平滚动（点击箭头和动画）

http://jsfiddle.net/stfzy/33/（目前我已经让它在结束时停止）

只有一个div的自动循环，类似这样：

(function($) {
    $.fn.seqfx = function() {
        var elements = this,
            l = elements.length,
            i = 0;

        function execute() {
            var current = $(elements[i]);
            i = (i + 1) % l;

            current
                .fadeIn(400)
                .delay(4000)
                .fadeOut(300, execute);
        }
        execute();
        return this;
    };
}(jQuery));

$("#fader div").seqfx();

不管最好的解决方案是什么（即上面的东西有什么好处还是有更简单的方法？），如果有人可以解释这些部分或指导我查阅相关文档，那就太好了。我想了解为什么代码让它循环，而不仅仅是复制/粘贴。

谢谢！

【问题讨论】：

标签： jquery loops scroll infinite

【解决方案1】：

“无限循环”是由于对execute()的调用中的递归：

.fadeOut(300, execute);

这意味着一旦元素褪色，fadeOut 将调用 execute()，这意味着 execute() 本质上会再次调用自身。

【讨论】：

这不起作用/不稳定。不过，我希望不是这样。

【解决方案2】：

这是一个问题：“即上面的东西有什么好处还是有更简单的方法？”

答案是肯定的，有一个更简单的方法。只需使用那个时髦的plugin jquery-timing。它允许以多种简单的方式连接动画和异步操作。

使用 jquery-timing 你不需要定义 seqfx。你写的是：

$("#fader div").repeat().each($).fadeIn(400).delay(4000).fadeOut(300,$);

然后，您的 jQuery 方法链将变成更具时间感知能力的东西。 jQuery 创始人 John Resig 表示，该插件将链接提升到了一个新的水平。

那么为什么这段代码和你的 seqfx 一样在无限循环之上？

.repeat() 方法（没有任何 .until()）将在方法链后面继续。 .each($) 开始一个顺序循环，一个一个地迭代所有选定的元素。最后，带有 .fadeOut(300,$) 的淡出版本会一直等到动画结束。

所有这些都在无限循环中一个一个地为所有选定的元素设置动画。

【讨论】：