hide() and show() methods can be used to set animation effects. This paper describes the effects of these two methods.
Hide (parameter 1, parameter 2):
Parameter 1: time, in milliseconds, indicating the time for object hiding
Parameter 2: callback function, which is triggered after the object is hidden.
Show (parameter 1, parameter 2):
Parameter 1: same as above
Parameter 2: same as above
Example:
Requirement Description: click a picture, the picture will be hidden slowly, and then it will be deleted from the page. The position of the previous picture will be supplemented by the next picture
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: 100px; 9 height: 80px; 10 } 11 12 #pics div{ 13 float: left; 14 margin: 2px; 15 width: 100px; 16 height: 80px; 17 } 18 </style> 19 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script> 20 <script> 21 $(function(){ 22 //Get all pictures,And register click events 23 $("#pics>div").click(function(){ 24 $(this).hide(800,function(){
//Callback function to clear the currently clicked element 25 $(this).remove();//Method to remove the elements currently calling this method.---commit suicide 26 }); 27 }); 28 }); 29 </script> 30 </head> 31 <body> 32 <div id="pics"> 33 <div><img src="images/01.jpg" ></div> 34 <div><img src="images/02.jpg" ></div> 35 <div><img src="images/03.jpg" ></div> 36 <div><img src="images/04.jpg" ></div> 37 <div><img src="images/05.jpg" ></div> 38 </div> 39 </body> 40 </html>
Remarks:
$(this).remove(); / / method removes the element that currently calls this method -- suicide.