如何排序一個div的隱藏順序，然后使用jQuery動畫顯示另一個div？

Question

我有一個代碼，應該顯示表單中的下一個div：

下一步按鈕：

$('.site.active').removeClass('active').hide().next().show().addClass('active');

返回鍵：

$('.side.active').removeClass('active').hide().prev().show().addClass('active');

一切對我來說都很好，但如何在此顯示動畫並隱藏這種形式： http : //azmind.com/demo/bootstrap-long-multi-step-form/

以我的形式，過渡很難隱藏到最后，然后再顯示。

Answer 1

您可以使用回調嵌套動畫。 動畫結束時，將調用其回調函數。 在其中，您可以在另一個元素上執行另一個動畫。

在您的情況下，您需要選擇具有.active類的元素， .active淡出，在該逐漸消失的回調中，刪除.active並調用.next() ，使該“ next”元素進入其中，然后調用.addClass()在淡入的回調中。

 $(function() { $('.next').on('click', function() { $('.active').fadeOut('slow', function() { // this gets called when the fade out finishes $(this).removeClass('active').next().fadeIn('slow', function() { // this gets called when the fade in finishes $(this).addClass('active'); }); }); }); }); 

 .page { display: none; width: 100px; height: 100px; } .first { display: block; background: red; } .second { background: blue; } .third { background: green; } .active { color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="page first active">first page</div> <div class="page second">second page</div> <div class="page third">third page</div> <button class="next">Next</button>