0

私のコードは、行きたい場所に到達するにはほど遠いことを知っています。私が達成したいのは、アイテムのリストです。アイテムは、スライドダウンアニメーションで次々と循環します。これにどうアプローチするかわかりません。

html

<div class="message">

                        <ul>
                            <h2><li class="rotate1">A better web...</li></h2>
                            <h2><li class="rotate2">Built By Spring Method</li></h2>
                            <h2><li class="rotate3">Test content</li></h2>

                        </ul>


                </div>

js

$(function() { 
$(".rotate2").hide();
$(".rotate3").hide();

    $(".message ul li").each(function(){
       $(this).slideDown(); 
    });
});
4

1 に答える 1

2

この例では、いくつかのことが明らかになるはずです。

http://jsfiddle.net/mattdlockyer/GhPqu/

重要なのは、アニメーションの関数を指定し、最初のslideDownメソッドが完了したときに関数として再帰的に呼び出すことです。

slideDownの動作の詳細については、http：//api.jquery.com/slideDown/を確認してください。

次の例に示すように、完了する関数を指定できることがわかります。

$('#clickme').click(function() {
  $('#book').slideDown('slow', function() {
    // Animation complete.
  });
});

このメカニズムを使用して、animate関数を再帰的に呼び出し、リスト内の次の要素に繰り返し処理しました。

4番目の要素が存在しないため、関数は呼び出されず、サイクルを無駄にすることはありません...

シンプルでエレガントなimho！

于 2013-02-02T07:16:43.037 に答える