5

今日、これを理解するのに少し苦労しています。DOM (同じ属性要素 $('.elements') の下にリストされている) 内に 5 つの項目をフェードインおよびフェードアウトさせたいと考えています。 API を少し読んで、フェードインとフェードアウトのショーケース ギャラリーを実装するには、.each() が素晴らしいアイデアだと思いました。

ただし、私は現在使用しています： 

$('.elements').each(function() {
    $(this).fadeIn(2000).delay(200).fadeOut(2000).show();
})

しかし、すべてが一度にフェードインおよびフェードアウトします。

すべてが連鎖され、リストの最初の項目 (別名 - $('elements').eq(0)?) から最後の項目まで開始され、再び再開されるシーケンシャル エフェクトを実行するにはどうすればよいですか?

javascript/jqueryでこれを行うにはwhileループが本当に必要ですか? 負荷とファイルサイズを削減するために jQuery が実行できるようにチェーンできる同様の機能があることを期待していました。

また、画像が div からオーバーフローするのを制限する方法はありますか?

4

4 に答える 4

9 
(function loop() {
  $('.elements').each(function() {
    var $self = $(this);
    $self.parent().queue(function (n) {
      $self.fadeIn(2000).delay(200).fadeOut(2000, n);
    });
  }).parent().promise().done(loop);
}());

デモ: http://jsfiddle.net/uWGVN/2/

終わりなくループするように更新されました。

2回目の更新：別の、おそらくより読みやすいアプローチ：

(function fade(idx) {
  var $elements = $('.elements');
  $elements.eq(idx).fadeIn(2000).delay(200).fadeOut(2000, function () {
    fade(idx + 1 < $elements.length ? idx + 1 : 0);
  });
}(0));

デモ: http://jsfiddle.net/uWGVN/3/

于 2012-04-05T16:45:21.297 に答える
2

コールバックを追加できます

公式ドキュメント：

('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

i ++ et $（'。elements'）。eq（i）で同じ関数を呼び出します

http://jsfiddle.net/dFnNL/

于 2012-04-05T16:38:38.773 に答える
1

オーバーフローの場合は、CSS でスタイルを設定します。

div.(class) { position:relative; overflow:hidden; }
于 2012-04-05T16:47:38.017 に答える