如何排序一个div的隐藏顺序，然后使用jQuery动画显示另一个div？

Question

I have a code which should show the next div from my form:

Next button:

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

Back button:

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

All works fine for me but how can I animate my show and hide like in this form here: http://azmind.com/demo/bootstrap-long-multi-step-form/

In my form the transition is very hard hide last and show next.

Answer 1

You can nest animations by using callbacks. When an animation finishes, it's callback function is called. Inside that you can perform another animation on another element.

In your case, you'll want to select the element with the .active class, fade it out, in that fade out's callback remove the .active and call .next() , fade that "next" element in, then call .addClass() in the fade in's callback.

 $(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>