jquery animation animate Stop method using the detailed _jquery

Source: Internet
Author: User
Animate syntax:
Copy Code code as follows:

$ (selector). Animate (Styles,speed,easing,callback)

Copy Code code as follows:

<!doctype html>
<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>
<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, reach 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 (); Stops the current animation, returns to the starting point along the road, if clicks again in the return process, will suspend in the path
Clearinterval ();
})

$ (' #btn2 '). Click (function () {
$ ('. Wrap div '). Stop (true); Stop all animations go to the distance click Stop will be directly to the end point, if the return process and then click, will pause in the road
})

$ (' #btn3 '). Click (function () {
$ ('. Wrap div '). Stop (True,true); Stop all animations, go to the distance click Stop will be directly to the end point, if the return process and then click, will stop to the starting point
})

. Stop ()//stops the current animation
. Stop (TRUE)/stops all animations
. Stop (True,true)//stops all animations to reach the end of the animation
</script>
</body>

. Stop (); Stops the current animation, returns to the starting point along the road, if clicks again in the return process, will suspend in the path

. Stop (true); Stop all animations go to the distance click Stop will be directly to the end point, if the return process and then click, will pause in the road

. Stop (True,true); Stop all animations, go to the distance click Stop will be directly to the end point, if the return process and then click, will stop to the starting point

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.