本文是对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 90px; 9 height: 90px; 10 float: left; 11 /* vertical-align: top; */ 12 } 13 div{ 14 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>