代码学习：
<!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">
body{
background-image: url(0.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
div{
width:500px;
}
img{
width:50px;
height:50px;
vertical-align: top;
}
</style>
<script type="text/javascript">
//要求:动态遍历插入十张图片,同时实现图片的隐藏与显示
$(function(){
var tem = "";
for(i=1;i<=10;i++){
tem += "<img src="+parseInt(i)+".jpg>";
}
$("div").append(tem);
});//关键代码,遍历插入图片
$(function(){
$("#btn").click(function (){
$("div>img").show(1000);
});
$("#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>
</div>
</body>
</html>
运行结果：
即使世界不能让你开心，也要学会自己让自己开心·····················
