本文是對hide()和show()的進一步補充，其中不僅介紹回調函數，還有遞歸的相關知識點。 案例要求： 點擊”隱藏動畫“按鈕，四個頭像從後向前，每個以0.8秒的速度消失 點擊”顯示動畫“按鈕，四個頭像從前向後，每個以0.8秒的速度出現 知識點： 遞歸思想：arguments.callee 回調函數 ...
本文是對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>
