1.連續(xù)動畫實(shí)現(xiàn)
<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">回調(diào)</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('執(zhí)行完畢');
})
})
})
})
})
})
})
2.動畫隊列
將動畫連續(xù)的寫就會形成一個動畫隊列预愤，從上至下挨個執(zhí)行,與上述方法效果一樣但代碼更簡單清晰
$('#action').on('click', function() {
var $box = $('.box')
$box.hide(1000)
.show(1000)
.fadeOut()
.fadeIn()
.slideUp()
.slideDown(function() {
console.log('ok');
})
console.log('是否執(zhí)行完畢');
})
