代码学习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nearth</title>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width:400px;
}
img{
width:90px;
height:90px;
vertical-align: top;
}
</style>
<!-- <script type="text/javascript">
//要求:点击按钮1,图片全部隐藏,点击按钮2,图片全部出现
$(function(){
$("#btn1").click(function(){
$("div>img").hide(1000,function(){
alert("结束了");
});
});
$("#btn2").click(function(){
$("div>img").show(1000,function(){
alert("结束了===");
});
});
});
</script> -->
<script type="text/javascript">
$(function(){
//隐藏
$("#btn1").click(function(){
$("div>img").last("img").hide(1000,function(){
//arguments.callee相当于递归,不断的(一张张的)隐藏图片,而不是点击按钮,图片全部隐藏
$(this).prev().hide(1000,arguments.callee);
});
});
//显示
$("#btn2").click(function(){
$("div>img").first("img").show(1000,function(){
$(this).next().show(1000,arguments.callee);
});
});
});
</script>
</head>
<body>
<h1>隐藏动画案例</h1>
<hr >
<input type="button" name="" id="btn1" value="隐藏动画" />
<input type="button" name="" id="btn2" value="显示动画" />
<hr >
<div>
<img src="1.jpg" >
<img src="2.jpg" >
<img src="3.jpg" >
<img src="4.jpg" >
</div>
</body>
</html>
感冒难受，不想学习哒·························哭哭··························
