JQuery动画之hide()和show()的使用讲解二（代码示例）
- 不言转载
- 2019-01-18 10:48:462470浏览
本篇文章给大家带来的内容是关于JQuery动画之hide()和show()的使用讲解二（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
本文是对hide()和show()的进一步补充，其中不仅介绍回调函数，还有递归的相关知识点。
案例要求：
点击”隐藏动画“按钮，四个头像从后向前，每个以0.8秒的速度消失
点击”显示动画“按钮，四个头像从前向后，每个以0.8秒的速度出现
知识点：
递归思想：arguments.callee
回调函数：上节有叙述
实现思路（以点击”隐藏动画“为例）：
①获取所有的img，选中最后一个img
$("p>img").last("img")
②让最后一个img隐藏，并设置回调函数
$("p>img").last("img").hide(800,function(){ }
③回调函数中，让当前函数的上一个img隐藏，并设置递归参数
$(this).prev().hide(800,arguments.callee);
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
img{
width: 90px;
height: 90px;
float: left;
/* vertical-align: top; */
}
div{
width: 400px;
}
</style>
<script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#hide").click(function(){
$("div>img").last("img").hide(800,function(){
//回调函数, arguments.callee相当于递归
$(this).prev().hide(800,arguments.callee);
})
});
$("#show").click(function(){
$("div>img").first("img").show(800,function(){
//回调函数
$(this).next().show(800,arguments.callee);
})
});
});
</script>
</head>
<body>
<input type="button" id="hide" value="隐藏动画" />
<input type="button" id="show" value="显示动画" />
<div >
<img src="images/1.jpg" >
<img src="images/2.jpg" >
<img src="images/3.jpg" >
<img src="images/4.jpg" >
</div>
</body>
</html>以上是JQuery动画之hide()和show()的使用讲解二（代码示例）的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文转载于：cnblogs.com。如有侵权，请联系admin@php.cn删除