javascript - 如何使用 jQuery 在最后一步 (D) 自定义向导中制作单线动画？

Question

我有一个运行良好的向导。但是，当我单击最后一个按钮 D 时，它不会以单行动画。它的工作方式就像多个步骤。

$(document).ready(function() {
  $('.pPtn').click(function() {
    $(this).parent('li').prevAll().addClass('act')
    $(this).parent('li').addClass('act');
  });
});

.w-steps {
  width: 1170px;
}

.w-steps ul li {
  height: 3px;
  background: #ccc;
  width: 150px;
  list-style: none;
  margin: 2px;
  float: left;
  position: relative;
}

.w-steps ul li::after {
  position: absolute;
  height: 3px;
  background: blue;
  width: 0px;
  top: 0px;
  left: 0px;
  content: '';
  transition: all 0.45s;
}

.w-steps ul li.act::after {
  width: 100%;
}

.w-steps ul li span.pPtn {
  position: absolute;
  top: -15px;
  right: -10px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: blue;
  color: #fff;
  text-align: center;
  z-index: 1;
  cursor: pointer;
  padding: 2px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w-steps">
  <ul>
    <li><span class="pPtn">A</span></li>
    <li><span class="pPtn">B</span></li>
    <li><span class="pPtn">C</span></li>
    <li><span class="pPtn">D</span></li>
  </ul>
</div>

Answer 1

问题是因为您同时为所有元素设置了动画。相反，您需要根据它们的索引和动画运行所需的时间来交错它们。这可以通过循环调用 setTimeout() 来完成。试试这个:

$(document).ready(function() {
  $('.pPtn').click(function() {
    $(this).parent('li').prevAll().addBack().each(function(i) {
      var $li = $(this);
      setTimeout(function() {
        $li.addClass('act');
      }, i * 450);
    })
  });
});

.w-steps {
  width: 1170px;
}

.w-steps ul li {
  height: 3px;
  background: #ccc;
  width: 100px;
  list-style: none;
  margin: 2px;
  float: left;
  position: relative;
}

.w-steps ul li::after {
  position: absolute;
  height: 3px;
  background: blue;
  width: 0px;
  top: 0px;
  left: 0px;
  content: '';
  transition: all 0.45s;
}

.w-steps ul li.act::after {
  width: 100%;
}

.w-steps ul li span.pPtn {
  position: absolute;
  top: -15px;
  right: -10px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: blue;
  color: #fff;
  text-align: center;
  z-index: 1;
  cursor: pointer;
  padding: 2px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w-steps">
  <ul>
    <li><span class="pPtn">A</span></li>
    <li><span class="pPtn">B</span></li>
    <li><span class="pPtn">C</span></li>
    <li><span class="pPtn">D</span></li>
  </ul>
</div>

请注意，我纯粹减小了 li 宽度，以便它更好地适合代码片段。 JS 逻辑适用于任何宽度 li。