2

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

<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>inside制作淡入效果#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 崩溃了...

我究竟做错了什么？

4

2 回答 2

3

这是一个通用函数，它将一个接一个地淡入选择器中的每个项目：

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/

于 2012-06-13T17:12:52.570 回答
2

您可以通过将元素放入队列来避免递归：

$("#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) })();
于 2012-06-13T17:11:15.933 回答