JQ递归图片隐藏显示
2020-01-03 本文已影响0人
王远清orz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 400px;
}
img {
width: 90px;
height: 90px;
vertical-align: top;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
$('#btn1').click(function () {
$('div img').last().hide(800,function imgHide() {
$(this).prev().hide(800,imgHide);
})
});
$('#btn2').click(function () {
$('div img').first().show(800,function imgHide() {
$(this).next().show(800,imgHide);
})
});
})
</script>
</head>
<body>
<input type="button" value="隐藏动画" id="btn1" />
<input type="button" value="显示动画" id="btn2" />
<div>
<img src="images/a1.jpg" />
<img src="images/a2.jpg" />
<img src="images/a3.jpg" />
<img src="images/a4.jpg" />
</div>
</body>
</html>
