0

無限ループに関する多くのドキュメントを見つけましたが、複数のアプローチがあり、それを実際に説明するものがないため、コードに実装するのが難しくなっています。

私はそれを2つの方法で使用しようとしています：

  1. 水平スクロール (矢印をクリックしてアニメーション化)

http://jsfiddle.net/stfzy/33/ (現在、最後に到達したら停止するようにしています)

  1. これに似た、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

それは質問ですか？

答えはイエスです。もっと簡単な方法があります。ファンキーなプラグイン jquery-timingを使用するだけです。非常に多くの簡単な方法で、アニメーションと非同期アクションを連結できます。

jquery-timing では、seqfx を定義する必要はありません。あなたが書くすべては次のとおりです。

$("#fader div").repeat().each($).fadeIn(400).delay(4000).fadeOut(300,$);

jQuery メソッド チェーンは、よりタイミングを意識したものになります。jQuery の創設者である John Resig 氏は、このプラグインは連鎖を次のレベルに引き上げると述べています。

では、なぜそのコードが seqfx と同じ無限ループの上にあるのでしょうか?

.repeat() メソッド (.until() なし) は、背後にあるメソッド チェーンで延々と続きます。.each($) は順次ループを開始し、選択されたすべての要素を 1 つずつ繰り返します。最後に、.fadeOut(300,$) を指定したバージョンの fadeOut は、アニメーションが終了するまで待機します。

そのため、選択したすべての要素を 1 つずつ無限ループでアニメーション化します。

于 2012-11-19T03:47:06.230 に答える
1

「無限ループ」は、への呼び出しでの再帰によるものexecute()です。

.fadeOut(300, execute);

execute()これは、要素がフェードすると、fadeOut が呼び出されることを意味します。つまり、execute()本質的に再び自分自身を呼び出します。

于 2012-11-18T20:25:55.990 に答える