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

2019年8月4日 182次阅读

请看这个脚本：

<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同时变为正常.之前没有变为正常然后接下来变大

最佳答案 查看
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的步骤选项.我还使用addClass和removeClass作为一种本地存储来记住下一个动画需要缩小哪个div.你可以用计数器做一些数学并得到相同的结果,但这是有效的.

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

步骤体看起来有点奇怪,但它保证在动画的每个时刻,div堆栈的总高度保持不变.基本上,收缩和增长的div(最小值：30,最大值：50)的总高度必须始终为80,因此收缩div的高度应为80 – 增长div的高度.

点赞