Case: boot animation
Upper and lower two parts, the first high to below 0, then the maximum width of div 0, to form a narrow no animation
Click on the X in the background, set above an empty span is used to register the click event
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 322px; position: fixed; bottom: 0; right: 0; overflow: hidden; } span { position: absolute; top: 0; right: 0; width: 30px; height: 20px; cursor: pointer; } </style> </head> <body> <div class="box" id="box"> <span id="closeButton"></span> <div class="hd" id="headPart"> <img src="images/t.jpg" alt="" /> </div> <div class="bd" id="bottomPart"> <img src="images/b.jpg" alt="" /> </div> </div> <script src="common.js"></script> <script> my$("closeButton") .onclick = function () { // set becomes gradually high lowermost div 0, which add back off function Animate (My $ ( " bottomPart " ), { " height " : 0 }, function () { Animate (My $ ( " Box " ), { " width " : 0 }); }); }; </ Script > </ body > </ HTML >