<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <!--<script src= ". /.. /jquery/jquery-2.1.4.min.js "></script> - <Scriptsrc=".. /.. /jquery/jquery-1.4.2.min.js "></Script> <Linkhref=".. /.. /css/2-7.css "rel= "stylesheet" /> <title> Animating with animate</title> <Scripttype= "Text/javascript"> $(function () { $("#btn"). Click (function () { $("#box"). Animate ({height:"500px" }); //This method operates the div so that the div style is not restored, and the action span restores the previous style after the animation effect is complete. } ) $(". BTN1"). Click (function () { $("#box"). Animate ({height:"300px" }); //This method operates the div so that the div style is not restored, and the action span restores the previous style after the animation effect is complete. } ) }) </Script></Head><Body> <Div> <spanID= "Spnmove">Span Move</span> </Div> <DivID= "box"style= "background: #98bf21; height:100px; width:100px; margin:6px;"></Div> <Buttonclass= "BTN1">Animate</Button> <inputtype= "button"ID= "BTN"value= "Animate" /></Body></HTML>
Animate animation effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
