2011-04-14 26 views
0

いくつかのリスト要素をフェードインしてからすべてフェードアウトしてやり直す必要があります。私はここで見つけたコードを持っています:http://jsfiddle.net/mqthK/、ここで指摘された:Jquery: Fade multiple elements one after the other。しかし、このコードを再帰的に実行する必要があります(つまり、すべての要素をフェードアウトしてから、関数を再呼び出ししてやり直してください)。要素を1つずつフェードインしてからすべて消してから始めてください。

誰かがこれに適したコードを共有できますか?

ありがとうございました!

+0

をたぶんあなたの脳はちょっとしたものでしたが、確かにそうです:再帰的にやりたいとは思わないでしょう。反復はあなたが使うものです、そうですか? –

+0

「Brain Hiccup」の音が聞こえます... 12時間の仕事の一日でしたが、まだその終わりは見えません。 – Ran

答えて

1

、あなたはfadeToggleメソッドを使用することができます。

あなたがフェードインしたいすべての要素を選択して、表示/非表示するには、次の要素のインデックスに送信した場合、あなたは簡単にループすることができますし、再起動します。

http://jsfiddle.net/mqthK/48/

function fadeLI(elem, idx) { 
    elem.eq(idx).fadeToggle(500, function() { 
     fadeLI(elem, (idx + 1) % elem.length); 
    }); 
} 

fadeLI($("#list li"), 0); 
0

が次の要素のであるかどうかを確認してください。そうでなければ、あなたはリストの最後にいる。すべてを消して最初の要素で実行します。

+0

はい、私は論理を理解していますが、このための正しいコード(再帰関数には注意が必要です)。 – Ran

0

変更し、以下のようにfadeLI:

の作業例は:あなたはjQueryの1.4.4以降に更新した場合http://jsfiddle.net/mqthK/45/

function fadeLI(elem, show) { 
     if(elem.length == 0){ 
      fadeLI($("#list li:first")); 
     } 
     if(elem.is(":visible")){ 
     elem.fadeOut(500, function() { 
        fadeLI($(this).next()); 
      }); 
     } 
     else{ 
      elem.fadeIn(500, function() { 
        fadeLI($(this).next()); 
      }); 
     } 
} 
+0

ありがとうございます。これは私が必要なもののように見えます。しかし、実際の例では、最初のリスト要素は、要素がフェードアウトしても点滅し続けます。何故ですか? – Ran

+0

これは、要素を隠しているためにdisplay:noneというスタイル属性が割り当てられているためです。したがって、現在の要素の下にある要素はビューポートでバンプされています。ちらつきを避けたい場合は、表示属性を切り替える必要があります。 – Chandu

関連する問題