Question

我正在尝试制作徽标动画。标记看起来像这样：

<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()的连续调用会在动画完成后触发一段时间，并且在调用它时，前一次调用{{ 1}}已经完成，所以它不是技术上的递归。

这是一个更通用的实现，作为jQuery方法完成：

next()

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

Answer 2

您可以通过将元素放在queue：

中来避免递归

$("#logo span").each(function(n, e) {
    $(e).hide();
    $("#logo").queue(function() { $(e).fadeIn(function() { $("#logo").dequeue()}) });            
});

http://jsfiddle.net/YmVrQ/

这是一种“递归”的方法：

function fadeInRecursive (elems) {
    if (elems)
        $(elems.shift()).fadeIn(function() { fadeInRecursive(elems) });
}

fadeInRecursive($.makeArray($("#logo span")));

或者是jfriend00发布的精神：

var n = 0;
(function () { $("#logo span").eq(n++).fadeIn(arguments.callee) })();

jQuery递归淡入功能

2 个答案: