本文是對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 >
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> 轉載于:https://www.cnblogs.com/WangYujie1994/p/10283855.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)