如何使用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。