javascript - jQuery 递归淡入功能

Question

我正在尝试为 Logo 制作动画。标记如下所示:

<div id="logo">
    <h1>
        <span>A</span><span>n</span><span>t</span><span>o</span><span>n</span><span>i</span><span>o</span><span>R</span><span>o</span><span>s</span><span>s</span><span>i</span>
    </h1>
    <h2>composer</h2>
</div>

我想做的是为每个 <span> 制作淡入效果里面#logo 。为此，我使用以下代码:

function fadeInRecursive (elementToFade) {

    if (!elementToFade) {
        elementToFade = $('#logo span:first-child')
    }

    var next = elementToFade.next('#logo span')

    if (!next) {return false}

    elementToFade.animate({
        opacity: 1
    }, 3000, fadeInRecursive(next))
}

$(document).ready( fadeInRecursive )

但是 Firefox 崩溃了...

我做错了什么？

Answer 1

这是一个通用函数，它将在选择器中的每个项目中逐个淡出:

function fadeInSuccessive(selector, t) {
    var items = $(selector);
    var index = 0;

    function next() {
        if (index < items.length) {
            items.eq(index++).fadeIn(t, next);
        }
    }
    next();
}

fadeInSuccessive("#logo span", 1000);

还有一个工作演示:http://jsfiddle.net/jfriend00/vzgBd/

这实际上并没有使用递归(尽管它可能看起来像)，因为对 next() 的连续调用会在一段时间后由动画完成触发，并且当它被调用时，之前对 next() 的调用已经完成，因此从技术上讲它不是递归。

---

这里有一个更通用的实现，作为 jQuery 方法完成:

$.fn.fadeInSuccessive = function(t, fn) {
    var index = 0;
    var self = this;

    function next() {
        if (index < self.length) {
            self.eq(index++).fadeIn(t, next);
        } else {
            if (fn) {
                fn.call(self);
            }
        }
    }
    next();
}

$("#logo span").fadeInSuccessive(1000, function() {
    $(document.body).append("<br>Done!");
});

一个工作演示:http://jsfiddle.net/jfriend00/zTURy/