Question

我已经找到了大量关于无限循环的文档，但是使用多种方法并没有真正解释它的东西，这使得我很难实现我的代码。

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

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

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

无论最好的解决方案是什么（即什么是好的东西还是更简单的方法？），如果有人可以解释这些内容或指导我做的文档，那就真的很棒。我想了解为什么代码要循环，而不仅仅是复制/粘贴。

感谢！

Answer 1

“无限循环”是由于对execute()：

的调用中的递归

.fadeOut(300, execute);

这意味着fadeOut会在元素消失后调用execute()，这意味着execute()本质上会再次调用自身。

Answer 2

这是一个问题：＆＃34;即。是有什么好处的东西还是有更简单的方法？＆＃34;

答案是肯定的，有一种更简单的方法。只需使用那个时髦的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，$）的fadeOut版本将等到动画结束。

所以这一切在无限循环中一个接一个地动画所有选定的元素。

jQuery无限（循环）

2 个答案: