web-dev-qa-db-ja.com

各要素をフェードイン-次々に

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

わずかな遅延で各要素をフェードインしますか？

ここに私のコードの例があります。私はjqueryフレームワークを使用しています。

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

jqueryajaxload
46
Coughlin

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

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

しかし、タイマーはより優れたシステムであるか、それらすべてを取得し、それらを配列に入れ、その間に遅延を設けて一度に1つずつポップし、一度に1つずつフェードインする機能です。

18
Genericrich

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

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

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

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

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

これにより、ニースを「次々に」フェードイン効果にできます。 slideDownでも使用できます。お役に立てれば！

250
Aaron

これはどう？

jQuery.fn.fadeDelay = function() {
 delay = 0;
 return this.each(function() {
  $(this).delay(delay).fadeIn(350);
  delay += 50;
 });
};
10
halfpastfour.am

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

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


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

注意：私はそれをテストしていませんが、それがうまくいかなくても、あなたはアイデアを得て、それを簡単に修正するべきです。

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

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

4
Tamas Czinege

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

1
Darryl Hein

上記の回答から、私はこのようなものを思いついたのですが、私にとってはうまくいきました。

[〜＃〜] html [〜＃〜]

<div id="errorMessage" class="d-none" ></div>

Javascript

var vehicle = {

error: (error, message) => {
    if(error){
        vehicle.popUp(message, 'bg-danger');
    }else{
        vehicle.popUp(message, 'bg-success');
    }
},
popUp: (array, bgColor) => {

    var errorBox = $('#errorMessage');

    errorBox.removeClass('d-none');
    $.each(array, function(i,e){
        i=i+1;
        var messageBox = '<div id="'+i+'" class="'+bgColor+' text-white">'+e+'</div>';
        $(messageBox).appendTo(errorBox).delay(100*i+0).slideDown(100*i+0,function(){
            $('#'+i).delay(1000*i+0).slideUp(400*i+0, function(){
                $('#'+i).remove();    
            });
        });
    });               
},

}
0
Kyle Coots