1

私がやりたいのは、ナビゲーションのリスト項目を繰り返し処理し、各要素を順番にフェードインすることですが、2 つの遅延オプションがあるという柔軟性があります。次のアニメーションに進む前に、前の各アニメーションが完了するのを待つオプションです。および/または各アニメーションの開始間のカスタム遅延/タイムアウト (ミリ秒) (1 つのアニメーションの終了と次のアニメーションの開始の間の遅延ではありません)。

もちろん、ネストされたコールバックを使用して、各リスト項目を具体的に呼び出すこともできますが、それはコード的にはかなり非効率的であり、各要素を 1 つずつロードするだけです。ほぼ同時に読み込みますが、少し遅れる可能性があります (私が見た Flash ベースのナビゲーションのいくつかをエミュレートするため)。そのため、カスタム遅延オプションは、1 つの開始と次の開始の間にある必要があると私が言う理由です。

価値があるのは、ナビゲーション要素が最初に非表示に$('#nav li').hide();なっていることですが、それが事実である可能性があるとすでに推測していると思います. :)

この種の効果はどのように達成されるのでしょうか?

4

3 に答える 3

4 
$('#nav li').each(function(index, element) {
    $(element).delay(index*50).fadeIn(400); // delays each subsequent fade by 50ms.
    // Change 50 to match the duration of the fade and they will fade in one after the other.
});
于 2011-12-16T09:43:08.660 に答える
0

このフィドルを確認してください：http://jsfiddle.net/bPbw4/7/

nav HTML が次のようになっているとします。

<ul>
    <li>Item-1</li>
    <li>Item-2</li>
    <li>Item-3</li>
</ul>

次に、シリアル アニメーションの JS コードは次のようになります。

var currentLi = null;

var speed = 1000;
var gap = 500;

function doNext() {
    if(currentLi==null) {
        currentLi = $('ul li:first');
    }
    else if(currentLi.next().length!=0) {
        currentLi = currentLi.next();
    }
    setTimeout(function() {
        currentLi.fadeIn(speed, doNext);
    }, gap);
}

doNext();

上記のコードで、speedはアニメーションの速度で、gapはそれぞれの間の遅延です。fadeIn()

于 2011-12-16T09:44:09.970 に答える
0

このような単純な反復をお勧めします

(function(wait, speed) {

  var itm = $('#nav li'),
      len = itm.length,
      index = 0;

  (function sequentialFade() {
      $.when( itm.eq(index).fadeIn(speed) )
       .done(function() {
           if (index++ === len) return false;
           setTimeout(function() {
               sequentialFade()
           }, wait);
       })
  }());


}(1000, 200))

この場合、遅延オブジェクト (jQuery 1.5+) を使用しましたが、このアプローチの背後にある考え方は、アイテム th のフェードインの終了を待ってから、ミリ秒n後に th アイテムで関数を反復することです。timen+1

JsFiddle の例: http://jsfiddle.net/McLZ4/3

于 2011-12-16T12:07:46.347 に答える