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

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 并调用.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>