<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>打字机</title>
<style>
div{
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background: red;
color:#a7b5bc;
margin: 10px;
border-radius: 80px;
}
</style>
<script src="../jquery-1.8.2.js"></script>
<script>
$(function(){
//利用递归的思想来做打字机
$('button:first').on('click',function(){
$('div:first').slideDown(1000,function test(){
$(this).next().slideDown(1000,test)
})
})
$('button:last').on('click',function(){
$('div:last').slideUp(1000,function test(){
$(this).prev().slideUp(1000,test);
})
})
})
</script>
</head>
<body>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
<div>七</div>
<button >显示</button>
<button>隐藏</button>
</body>
</html>