使用循环使用jQuery动画单个列表项

Question

我正在jQuery中尝试一个相当简单的动画，使每个列表项依次向左滑动，然后拖回到Z索引上。

我想用循环遍历子元素，但是for-loop函数在动画完成之前一直递增变量，并且它们都一起移动。

null

$(document).ready(function() {
  function slideLeft(cardVal) {
    console.log("sub" + cardVal);
    $(cardVal)
      .css('z-index', '100')
      .delay(1000)
      .animate({
        left: "-=450px"
      }, 3000)
      .delay(200)
      .css('z-index', "10")
  };
  
  for (var i = 1; i < 4; i++) {
    var cardVal = ".cards li:nth-child(" + i + ")";
    console.log("main" + cardVal);
    slideLeft(cardVal);
  }
});

.cards {
  position: absolute;
  border: 2px white solid;
  width: 70%;
  min-height: 50vh;
}

.cards li {
  position: absolute;
  left: 500px;
  width: 20%;
  height: 50%;
  background-color: aliceblue;
}

.card img {
  height: 100%;
  width: 100%;
  padding: auto;
}

.card:nth-child(1) {
  z-index: 30;
}

.card:nth-child(2) {
  z-index: 20;
}

.card:nth-child(3) {
  z-index: 10;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards">
  <li class="card">
    <img src="./images/Image1.png" alt="Slide1">
  </li>
  <li class="card">
    <img src="./images/Image2.png" alt="Slide2">
  </li>
  <li class="card">
    <img src="./images/Image3.png" alt="Slide3">
  </li>
</ul>

null

console.logs向我显示它正在正确地转到函数，但是它并没有等到它运行完毕才返回到调用函数并增加循环变量。

提前致谢

Answer 1

这个问题是因为for循环会立即遍历每个元素并启动动画。

要解决这个问题，您可以循环遍历元素，并使用delay()根据它们在集合中的索引增加它们的开始时间。类似这样的事情：

null

jQuery($ => {
  $('.cards li').each((i, el) => {
    $(el).css('z-index', '100')
      .delay(3200 * i)
      .animate({
        left: "-=450px"
      }, 3000)
      .delay(200)
      .css('z-index', "10")
  });
});

.cards {
  position: absolute;
  border: 2px white solid;
  width: 70%;
  min-height: 50vh;
}

.cards li {
  position: absolute;
  left: 500px;
  width: 20%;
  height: 50%;
  background-color: aliceblue;
}

.card img {
  height: 100%;
  width: 100%;
  padding: auto;
}

.card:nth-child(1) {
  z-index: 30;
}

.card:nth-child(2) {
  z-index: 20;
}

.card:nth-child(3) {
  z-index: 10;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards">
  <li class="card">
    <img src="./images/Image1.png" alt="Slide1">
  </li>
  <li class="card">
    <img src="./images/Image2.png" alt="Slide2">
  </li>
  <li class="card">
    <img src="./images/Image3.png" alt="Slide3">
  </li>
</ul>