Home > Developer > JavaScript
Animate Syntax:
Copy codeThe Code is as follows:
$ (Selector). animate (styles, speed, easing, callback)
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Testing </title>
<Link rel = "stylesheet" href = "css/reset.css">
<Script src = "js/jquery. js"> </script>
<Style>
. Wrap {
Position: relative;
Height: 300px;
Width: 300px;
Border: 5px solid # FCF;
}
. Wrap div {
Position: absolute;
Left: 0; top: 0;
Height: 50px;
Width: 50px;
Background: # FA0;
}
</Style>
</Head>
<Body>
<Input type = "button" id = "btn1" value = "Stop current Animation">
<Input type = "button" id = "btn2" value = "stop all animations">
<Input type = "button" id = "btn3" value = "stop all animations and reach the end">
<Div class = "wrap">
<Div> </div>
</Div>
<Script>
Function moveX (){
$ ('. Wrap div'). animate ({'left': '250px '}, 1000). animate ({'left': '0px'}, 1000 );
} MoveX ();
$ ('# Btn1'). click (function (){
$ ('. Wrap div'). stop (); // stop the current animation and return the starting point along the road. If you click it again during the return process, the animation will be paused.
ClearInterval ();
})
$ ('# Btn2'). click (function (){
$ ('. Wrap div '). stop (true); // when you stop all animations, clicking stop will directly reach the end point. If you click it again during the return process, it will be paused in the path.
})
$ ('# Btn3'). click (function (){
$ ('. Wrap div '). stop (true, true); // stop all animations. Clicking stop in the distance will directly reach the end point. If you click stop in the return process, it will stop at the start point.
})
//. Stop () // stop the current Animation
//. Stop (true) // stop all animations
//. Stop (true, true) // stop all animations to reach the animation end point
</Script>
</Body>
</Html>
. Stop (); // stop the current animation and return the starting point along the road. If you click it again during the return process, the animation will be paused.
. Stop (true); // when you stop all animations, clicking "stop" will directly reach the end point. If you click "stop" during the return process, the animation will be paused.
. Stop (true, true); // stop all animations. Clicking stop in the distance will directly reach the end point. If you click stop in the return process, it will stop at the start point.
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
