17 jquery通过递归来实现的图片依次消失和隐藏的案例
2019-03-11 本文已影响0人
An的杂货铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 400px;
}
img{
width:90px ;
height:90px;
vertical-align: top;
}
</style>
</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>
<script src="../jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
$('div img').last('img').hide(600,function(){
$(this).prev().hide(600,arguments.callee)
})
})
$('#btn2').click(function(){
$('div img').first('img').show(600,function(){
$(this).next().show(600,arguments.callee);
})
})
})
// argument为函数内部对象，包含传入函数的所有参数，arguments.callee代表函数名，多用于递归调用，防止函数执行与函数名紧紧耦合的现象，对于没有函数名的匿名函数也非常起作用。
</script>
</html>
效果
image.png
