4

このスクリプトを参照してください。

<style type="text/css">
    .div1
    {
        background-color: Aqua;
        width: 400px;
        height: 30px;
    }
    .div2
    {
        background-color: Fuchsia;
        width: 400px;
        height: 30px;
    }
    .div3
    {
        background-color: Green;
        width: 400px;
        height: 30px;
    }
    .div4
    {
        background-color: Orange;
        width: 400px;
        height: 30px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var timer = setInterval(showDiv, 2000);

        var counter = 0;

        function showDiv() {
            if (counter == 0) { counter++; return; }
            $('div.My').css('height', '30px');
            $('div.My').animate({ height: '30' }, 2000, function () { alert('i'); });
            $('div.My')
                .stop()
                .filter(function () { return this.id.match('div' + counter); })
                .animate({ height: '50' }, 500, function () { });
            counter == 4 ? counter = 0 : counter++;
        }
    });
</script>
<body>
<div>
    <div class="div1 My" id="div1">
    </div>
    <div class="div2 My" id="div2">
    </div>
    <div class="div3 My" id="div3">
    </div>
    <div class="div4 My" id="div4">
    </div>
</div>
</body>

5 秒ごとに div が大きくなり、通常になり、次の div が大きくなります。問題は、最初のアニメーションが実行されず、2 番目のアニメーションが実行されることです。問題はどこにありますか?

JSFiddle サンプル

編集1）

次の div が大きくなるときに前の div が正常になるのと同時に欲しい.前が正常になってから次が大きくなるのではなく

4

1 に答える 1

2

あなたのフィドルの私のフォークをチェックして、これがあなたが望むことをしているかどうか教えてください。.stop()途中で呼び出しがあり、ゆっくりと縮小するアニメーションの表示がブロックされていました。

完全なスクリプトは次のとおりです。

$(document).ready(function () {
  var timer = setInterval(showDiv, 2000);

  var counter = 0;

  function showDiv() {
     if (counter == 0) { counter++; return; }
     $('div.My').animate({ height: '30px' }, { duration: 500, queue: false });
     $('div.My')
      .filter(function () { return this.id.match('div' + counter); })
      .animate({ height: '50px' }, { duration: 500, queue: false });
     counter == 4 ? counter = 0 : counter++;
  }
});

編集 -新しいフィドル

上記のコードが正しくないと感じ、ブラウザで期待どおりに動作しなかったため、よりクリーンに動作すると思われる別のアプローチを見つけました。これはjQueryのstepオプションを使用しています。また、addClassandremoveClassを一種のローカル ストレージとして使用して、次のアニメーションでどの div を縮小する必要があるかを覚えています。で計算しcounterて同じ結果を得ることができますが、これは機能します。

$(document).ready(function () {
    var timer = setInterval(showDiv, 2000);

    var counter = 0;

    function showDiv() {
       if (counter == 0) { counter++; return; }
       $shrinker = $("div.big").removeClass("big");
       $grower = $("#div"+counter);

       $grower
        .animate({ height:50 },
         {duration:500,
          step: function(now, fx) {
           $shrinker.css("height", 80-now);
          }
         }
        );

      $grower.addClass("big");
      counter == 4 ? counter = 0 : counter++;
    }
});

stepボディは少し奇妙に見えますが、アニメーションの各瞬間で、div スタックの合計の高さが一定に保たれます。基本的に、縮小 div と拡大 div の合計の高さ (最小:30、最大:50) は常に 80 でなければならないため、縮小 div の高さは 80 - 拡大 div の高さである必要があります。

于 2013-03-08T07:14:30.427 に答える