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>内側ごとにフェードイン効果を作ること#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

要素を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) })();
于 2012-06-13T17:11:15.933 に答える