1.连续动画实现
<body>
<button id="box1">show</button>
<button id="box2">hide</button>
<button id="box3">fadeIn</button>
<button id="box4">fadeOut</button>
<button id="box5">slideDown</button>
<button id="box6">slideUp</button>
<button id="action">回调</button>
<div class="content">
<div class="box">
hello
</div>
</div>
$('#action').on('click', function() {
var $box = $('.box')
$box.hide(1000, function() {
$box.show(1000, function() {
$box.fadeOut(1000, function() {
$box.fadeIn(1000, function() {
$box.slideUp(1000, function() {
$box.slideDown(1000, function() {
console.log('执行完毕');
})
})
})
})
})
})
})
2.动画队列
将动画连续的写就会形成一个动画队列，从上至下挨个执行,与上述方法效果一样但代码更简单清晰
$('#action').on('click', function() {
var $box = $('.box')
$box.hide(1000)
.show(1000)
.fadeOut()
.fadeIn()
.slideUp()
.slideDown(function() {
console.log('ok');
})
console.log('是否执行完毕');
})
