<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
400px;
}
img{
90px ;
height:90px;
vertical-align: top;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
//页面加载
$(function () {
//隐藏
$("#btn1").click(function () {
$("div>img").last("img").hide(800,function () {
$(this).prev().hide(800,arguments.callee);
});
});
//显示
$("#btn2").click(function () {
$("div>img").first("img").show(800,function () {
$(this).next().show(800,arguments.callee);
});
});
});
</script>
</head>
<body>
<input type="button" value="隐藏动画" id="btn1"/>
<input type="button" value="显示动画" id="btn2"/>
<div>
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
</div>
</body>
</html>