Question

请看这个脚本：

<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变大。问题是第一个动画没有运行，只是第二个动画运行。问题出在哪里？

JSFiddle Sample

修改1）

我希望当下一个div变大时，之前的div会同时变为正常。不会先前变为正常然后下一个变大

Answer 1

查看my fork of your fiddle并告诉我这是否符合您的要求。你在那里打电话给.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++;
  }
});

修改 - new Fiddle

我对上面的代码感觉不对，并且它在我的浏览器中没有按预期工作，所以我发现了一种不同的方法，我认为它更干净。这个使用jQuery的step选项。我还使用addClass和removeClass作为一种本地存储来记住下一个动画需要缩小哪个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（最小值：30，最大值：50）的总高度必须始终为80，因此收缩div的高度应为80 - 增长div的高度。

两个连续的动画将无法在jQuery中运行

1 个答案:

修改 - new Fiddle