4

複数のdiv'banneritem'を含むクラス'bannergroup'のdivがあります。これらのアイテムを互いに代わりに回転（フェードインしてからフェードアウト）させたいです。

クラスbannergroupで複数のdivを持つことができ、それぞれを個別にローテーションする必要があります。

HTMLは次のとおりです。

<div class="bannergroup">
  <div class="banneritem">Only visible one at a time</div>
  <div class="banneritem">Only visible one at a time</div>
  <div class="banneritem">Only visible one at a time</div>
  <div class="banneritem">Only visible one at a time</div>
</div>

<div class="bannergroup">
  <div class="banneritem">Only visible one at a time</div>
  <div class="banneritem">Only visible one at a time</div>
  <div class="banneritem">Only visible one at a time</div>
  <div class="banneritem">Only visible one at a time</div>
</div>

私のJqueryは次のようになります：

$('.banneritem').css('display', 'none');
$('.bannergroup').children('.banneritem').each(function( i ) {
  $(this).fadeIn().delay(4000).fadeOut();               
});

問題：各ステートメントは、前のdivが完了する前に実行され続けます。前の子がいなくなるまで待ってほしい。また、これを継続して実行する必要があります。一度だけ停止します。これを関数に入れることはできますが、もう一度呼び出す方法がわかりません。

編集：常に4つの子アイテムがあるとは限りません。また、1つのグループの子の数が他のグループと異なる場合もありますが、両方とも同期してローテーションする必要があります。一方が他方の前に完了してから、それ自体を再起動するだけであれば問題ありません。

4

3 に答える 3

7

私は以前にこの質問に何度も答えまし た。今回はjQueryプラグインでラップしてみます。この.rotate()関数は、一致した要素の子に必要な効果を適用します。これは、連続アニメーションの子ごとにフェードイン/フェードアウトする効果です。

$.fn.rotate = function(){
  return this.each(function() {

    /* Cache element's children */
    var $children = $(this).children();

    /* Current element to display */
    var position = -1;

    /* IIFE */
    !function loop() {

        /* Get next element's position.
         * Restarting from first children after the last one.
         */
        position = (position + 1) % $children.length;

        /* Fade element */
        $children.eq(position).fadeIn(1000).delay(1000).fadeOut(1000, loop);
    }();
  });
};

使用法：

$(function(){
  $(".banneritem").hide();
  $(".bannergroup").rotate();
});

こちらをご覧ください。

于 2013-02-16T16:22:06.787 に答える
1

jsFiddleの例

$('div.bannergroup').each(function () {
    $('div.banneritem', this).not(':first').hide();
    var thisDiv = this;
    setInterval(function () {
        var idx = $('div.banneritem', thisDiv).index($('div.banneritem', thisDiv).filter(':visible'));
        $('div.banneritem:eq(' + idx + ')', thisDiv).fadeOut(function () {
            idx++;
            if (idx == ($('div.banneritem', thisDiv).length)) idx = 0;
            $('div.banneritem', thisDiv).eq(idx).fadeIn();
        });
    }, 2000);
});
于 2013-02-16T16:57:28.193 に答える
0

この問題は2つの方法で解決できます。以下のものが最も簡単で、インデックスを使用してアイテムごとの遅延を増やします。

$('.banneritem').css('display', 'none');
$('.bannergroup').children('.banneritem').each(function( i ) {
  $(this).delay(4000 * i)).fadeIn().delay(4000 * (i+1)).fadeOut();               
});
于 2013-02-16T16:02:03.350 に答える