ItsOdi ItsOdi - 1 month ago 8
CSS Question

How to sequence the hiding of one div then show another using jQuery animations?

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

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>