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

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++;
    }
});

stepbody 看起来有点奇怪，但它保证了在动画的每个时刻，div 堆栈的总高度保持不变。基本上，收缩和增长 div 的总高度（最小：30，最大：50）必须始终为 80，因此收缩 div 的高度应该是 80 - 增长 div 的高度。

于 2013-03-08T07:14:30.427 回答