在最后一步（D）自定義向導中，如何使用jQuery做單行動畫？

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 。