本文是对hide()和show()的进一步补充，其中不仅介绍回调函数，还有递归的相关知识点。
案例要求：
点击”隐藏动画“按钮，四个头像从后向前，每个以0.8秒的速度消失
点击”显示动画“按钮，四个头像从前向后，每个以0.8秒的速度出现
知识点：
递归思想：arguments.callee
回调函数：上节有叙述
实现思路（以点击”隐藏动画“为例）：
①获取所有的img，选中最后一个img
$("div>img").last("img")
②让最后一个img隐藏，并设置回调函数
$("div>img").last("img").hide(800,function(){ }
③回调函数中，让当前函数的上一个img隐藏，并设置递归参数
$(this).prev().hide(800,arguments.callee);
代码如下：
我要评论 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>title</title>
6 <style type="text/css">
7 img{
8 width: 90px;
9 height: 90px;
10 float: left;
11 /* vertical-align: top; */
12 }
13 div{
14 width: 400px;
15 }
16 </style>
17 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
18 <script>
19 $(function(){
20 $("#hide").click(function(){
21 $("div>img").last("img").hide(800,function(){
22 //回调函数, arguments.callee相当于递归
23 $(this).prev().hide(800,arguments.callee);
24 })
25 });
26
27 $("#show").click(function(){
28 $("div>img").first("img").show(800,function(){
29 //回调函数
30 $(this).next().show(800,arguments.callee);
31 })
32 });
33 });
34 </script>
35 </head>
36 <body>
37 <input type="button" id="hide" value="隐藏动画" />
38 <input type="button" id="show" value="显示动画" />
39 <div >
40 <img src="images/1.jpg" >
41 <img src="images/2.jpg" >
42 <img src="images/3.jpg" >
43 <img src="images/4.jpg" >
44 </div>
45 </body>
46 </html>
如对本文有疑问， 点击进行留言回复！！
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
网友评论