次々に要素を表示する

Question

私はこのような質問をしばしば見るが、複数の解決策がある。私は再利用可能な短いものを考え出しています。私の質問は、次のコードではclearTimeout()にする必要がありますか？そして、あなたが改善するものは何ですか？パフォーマンスのためにこのコードがどれくらい良いか悪いのですか？
http://jsfiddle.net/elclanrs/fQX8M/15/

var fade1by1 = function ($elms, props) { 

    props = props || {}; 
    props.delay = props.delay || 1; // s 
    props.speed = props.speed || 400; // ms 
    props.ease = props.ease || 'linear'; 

    for (var i=0, d=0, l=$elms.length; i<l; i++, d+=props.delay*1000) { 
     (function (i, d) { 
      // Using `delay()` instead of `setTimeout()` 
      // as Alexander suggested 
      $elms.eq(i).delay(d).fadeIn(props.speed, props.ease); 
     })(i, d); 
    } 
}; 

Answer 1

アニメーションを停止するように、それはいないようですので、私はあなたがwindow.clearTimeoutに必要とは思いません。あなたはまだ未確定の場合は.delayを使用すると、明らかにwindow.setTimeoutも使用されます。

var fade1by1 = function ($elms, speed) { 
    speed = speed || 1; // Seconds 
    for (var i=0, s=0, l=$elms.length; i<l; i++, s+=speed*1000) { 
     $elms.eq(i).delay(s).fadeIn('slow'); 
    } 
}; 

実際にはhereをご覧ください。

Answer 2

私には、fadeIn関数のコールバックを使用してください。以下のような何かがあなたの目標（新しいのparamsで代用）の全てを達成する必要があります代わりに、ますます長い待機期間と一度にすべてのアクションを設定するので

var customFade = function(parent, speed){ 
    $(':hidden:first', parent).fadeIn(speed, function(){ 
     customFade(parent, speed) 
    }); 
} 
$('button').click(function(){ customFade($('ul'), 1000); }); 

Answer 3

を、別のアプローチは、それぞれに直接ショーの動作をバインドすることです選択された要素をカスタムイベントとして定義し、そのバインドされた関数に固定待機期間と「next」要素のカスタムイベントが存在する場合はそのカスタムイベントをトリガする呼び出しを含めます。始めるには、最初の要素のヒューズを点灯させるだけです。

ので、このような何か：

var fadeCascade = function fadeCascade(your_selector, props) { 
    props = props || {}; 
    props.delay = props.delay || 1; // s 
    props.speed = props.speed || 2000; // ms 
    props.ease = props.ease || 'linear'; 

    $(your_selector) 
    .addClass('showme') // Being a little lazy here, but it works 
         // You could work out an inspection by attached event 
    .bind('showme', function() { // custom event 
     $(this) 
     .delay(props.delay * 1000) 
     .fadeIn(props.speed, props.ease, function() { 
      $(this).nextAll('.showme:first').trigger('showme'); // jqueryish recursion 
     }); 
    }).hide() // or just hide in initial css 
    .first().trigger('showme'); // set the dominoes falling 
}; 

とは明らかにトリガする：

fadeCascade('div.bar');​ 

あなたは衛生面が心配している場合は、イベントのバインドを解除でき、あなたが行くようにクラスを削除します。

例：http://jsfiddle.net/redler/EKx6s/1/

更新：追加遅延、感謝@Alexander。