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

我有个巫师工作得很好。但是，当我单击最后一个按钮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>

最佳答案

问题是，您同时设置所有元素的动画。相反，您需要根据它们的索引和动画运行所需的时间来错开它们。这可以通过循环中的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。