0

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

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

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

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

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

http://jsfiddle.net/UHpbR/2/

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

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

谢谢！

4

2 回答 2

1

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

.fadeOut(300, execute);

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

于 2012-11-18T20:25:55.990 回答
1

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

答案是肯定的，有一个更简单的方法。只需使用那个时髦的插件 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,$) 的淡出版本将等待动画完成。

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

于 2012-11-19T03:47:06.230 回答