我有一个代码应该显示我表单中的下一个 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/
在我的表单中,转换非常困难,先隐藏后显示。
最佳答案
您可以使用回调来嵌套动画。当动画结束时,它的回调函数被调用。在其中,您可以在另一个元素上执行另一个动画。
在您的情况下,您需要选择具有 .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>
关于javascript - 如何排序隐藏一个 div 然后使用 jQuery 动画显示另一个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40186704/