javascript - Jquery - 如何延迟后续动画？

Question

好的，我有 8 个 div，我需要让它们一次在 1 个中设置动画，这意味着在第一个和第二个、第二个和第三个等之间有延迟。起初我将它们全部制作成动画，然后根据 dropdwin 我将只制作几个或几个 div 的动画。

无论我需要我的动画在使用另一个 div 再次运行之前延迟。

这是我的动画:

function panelIn(labDiv)
        {

            var neww = "100%";
  $(labDiv).delay(600).animate({
    width: neww
  }, 500);

        }

起初我尝试设置一个全局变量并根据它更改延迟，这适用于第一个和第二个 div，但不适用于所有后续的:

function panelIn(labDiv)
        {
            if(wasFirst == true)
            {
                wasFirst = !wasFirst;
            var neww = "100%";
  $(labDiv).delay(600).animate({
    width: neww
  }, 500);
            }
            else {
                var neww = "100%";
  $(labDiv).delay(1200).animate({
    width: neww
  }, 500);
            }
        }

我将不得不做这样的事情:

panelIn(div1);
panelIn(div2);
panelIn(div3);
panelIn(div4);

希望避免在它们之间放置一些等待函数。这也很困难，因为我需要将第一个延迟 600，第二个延迟 12000，第三个延迟 1800，依此类推。我需要它在 panelIn func 和 1 组延迟内。

如何让我的 div 一次在 1 个中设置动画？这能做到吗？

Answer 1

有8个div

<div class="animateContainer">
  <div class="animateThis">Item 1</div>
  <div class="animateThis">Item 2</div>
  <div class="animateThis">Item 3</div>
  <div class="animateThis">Item 4</div>
  <div class="animateThis">Item 5</div>
  <div class="animateThis">Item 6</div>
  <div class="animateThis">Item 7</div>
  <div class="animateThis">Item 8</div>
</div>

并且您希望能够触发它们中的每一个，但要延迟它们。第一个延迟 600，第二个延迟 1200，第三个延迟 1800，等等。

var elems = $(".animateThis");

function panelIn(divNumber){
 var neww = "100%";
 $(elems[divNumber]).delay(600 * (divNumber+1)).animate({
    width: neww
  }, 500);

}

panelIn(0);
panelIn(1);
panelIn(2);
panelIn(3);
panelIn(4);
panelIn(5);
panelIn(6);
panelIn(7);

您可以在此处查看此解决方案 https://jsfiddle.net/senordelaflor/h0z87r7f/2/