This article is a further supplement to hide() and show(), which not only introduces the callback function, but also the related knowledge of recursion.
Case requirements:
Click the "hide animation" button, four avatars will disappear in 0.8 seconds from the back to the front
Click the "show animation" button, four heads will appear at the speed of 0.8 seconds from front to back
Knowledge points:
Recursion: arguments.call
Callback function: described in the previous section
Implementation idea (take click "hide animation" as an example):
① get all img and select the last img
$("div>img").last("img")
② hide the last img and set the callback function
$("div>img").last("img").hide(800,function(){ }
③ in the callback function, hide the previous img of the current function and set the recursive parameter
$(this).prev().hide(800,arguments.callee);
The code is as follows:
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 //Callback function, arguments.callee Equivalent to recursion 23 $(this).prev().hide(800,arguments.callee); 24 }) 25 }); 26 27 $("#show").click(function(){ 28 $("div>img").first("img").show(800,function(){ 29 //Callback function 30 $(this).next().show(800,arguments.callee); 31 }) 32 }); 33 }); 34 </script> 35 </head> 36 <body> 37 <input type="button" id="hide" value="hide animation" /> 38 <input type="button" id="show" value="Display animation" /> 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>