CSS section: <style type= "Text/css" > *{margin:0;padding:0;} UL li{List-style:none;} img {border:0 none;} body {padding:100px;} Input[name= ' show ']{position:fixed;right:50%; top:50px;} Input[name= ' Hide ']{position:fixed;right:40% top:50px;} div.test{width:100px;position:relative;border:1px blue Solid;} </style> HTML section: <input name= "Show" type= "button" value= "click Test"/> <div> Fill in Content </div> jquery section: <script type= "Text/javascript" > $ (function () { $ (' div.test '). CSS ("opacity", "0.5"); $ (' input '). Focus () . Click (function () { $ (' div.test '). Animate ({left: ' 400px ', Height: ' 100px '},200) . Animate ({top: ' 200px ',},200) . Animate ({left:0},200) . Animate ({top:0},{duration:200,step:cb,queue:true})//change the queue value to false so that the animation is not added to the animation queue, that is, the animation is not performed in the default order; Step is the callback function of animation function }) Function CB () { $ (this). CSS ({ border: ' 2px red solid ', Opacity:1 }) } }) </script> |