动画队列的演示说明
直接用例子说明
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
</head>
<body>
<button id="action"> 回调</button>
<div class="container">
<div class="box">
hello
</div>
</div>
</body>
</html>
// jquery第一种写法
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('动画执行完毕')
})
})
})
})
})
})
//jquery第二种写法
$box.hide(1000)
.show(1000)
.fadeOut()
.fadeIn()
.slideUp()
下面附上效果链接
效果链接
