51

現在持っているコンテンツを表示するために JSON ページをロードする方法を見つけようとしています。しかし、私は各要素を次々とフェードインしようとしていますか? 誰かがそれを行う方法に精通していますか?

少し遅れて各要素をフェードインしますか?

これが私のコードの例です。jquery フレームワークを使用しています。

コード: http://pastie.org/343896

4

6 に答える 6

270

スパン要素の配列があるとしましょう：

$("span").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

（クイックノート：.delayメソッドを使用するにはjQuery 1.4以降が必要だと思います）

これは基本的に、設定された時間待機し、各要素をフェードインします。これは、待機時間を要素のインデックスで乗算しているために機能します。配列を反復処理する場合、遅延は次のようになります。

  • 遅延400*0（遅延なし、最初の要素に必要なフェードインのみ）
  • 遅延400*1
  • 遅延400*2
  • 遅延400*3

これにより、「次々に」フェードイン効果が得られます。また、slideDownで使用することもできます。お役に立てれば！

于 2011-01-11T19:43:25.427 に答える
18

さて、フェード機能をセットアップして、「次の」機能をトリガーすることができます。

 $("div#foo").fadeIn("fast",function(){
      $("div#bar").fadeIn("fast", function(){
           // etc.
      });
   });

しかし、タイマーはより良いシステムかもしれませんし、それらをすべて取得して配列に入れ、間に遅延を置いて一度に 1 つずつポップオフし、一度に 1 つずつフェードインする関数かもしれません。

于 2008-12-19T01:55:16.363 に答える
10

これはどう？

jQuery.fn.fadeDelay = function() {
 delay = 0;
 return this.each(function() {
  $(this).delay(delay).fadeIn(350);
  delay += 50;
 });
};
于 2011-02-15T11:57:59.033 に答える
4

次のようなものが必要になると思います。

var elementArray = yourAjaxRequestReturningSomethingEdibleByJQuery();
fadeInNextElement(elementArray);


function fadeInNextElement(elementArray)
{
    if (elementArray.length > 0)
    {
        var element = elementArray.pop();
        $(element).fadeIn('normal', function()
        {
             fadeInNextElement(elementArray);
        }
    }
}

注意: 私はそれをテストしていませんが、動作しない場合でも、アイデアを得て簡単に修正する必要があります。

ところで、私はタイマーを使うことに同意しません。タイマーを使用すると、要素が次々とフェードインするという保証はなく、1 つの要素のフェードインは、前の要素が終了した場合にのみ開始されます。

理論的には動作するはずですが、何らかの理由で「チェーン」を停止する必要がある場合や、フェード アニメーションが時間どおりに終了しない場合などがあります。適切なチェーンを使用してください。

于 2008-12-19T02:05:35.703 に答える
1

setTimeout() (標準の JS 関数) を使用した jQuery fadeIn()を確認してください。このサイトhttp://www.realstorage.ca/で私が行ったことをチェックアウトできます。私は基本的にそれらを非表示にして表示するので、ループに入ることができます。

于 2008-12-19T01:53:00.753 に答える