Use of the stop method of JQuery animation
- 2020-03-30 02:52:34
- OfStack
The animate grammar:
. Stop (); // stop the current animation, return to the starting point along the way, if you click again during the return process, will be suspended in the road
. Stop (true); // stop all animations on the way to the stop will be directly to the end, if the return process to click again, will be suspended in the road
Stop (true, true); // stop all animations, click stop on the way to the end point directly, if you click again on the way back, it will stop at the beginning point
$(selector).animate(styles,speed,easing,callback)
<!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 the current animation ">
<input type="button" id="btn2" value=" Stop all animation ">
<input type="button" id="btn3" value=" Stop all animation 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, return to the starting point along the way, if you click again during the return process, will be suspended in the road
clearInterval();
})
$('#btn2').click(function(){
$('.wrap div').stop(true); //Stop all animations on the way to the stop will be directly to the end, if you click on the return process, will be suspended in the road
})
$('#btn3').click(function(){
$('.wrap div').stop(true,true); //Stop all animations, click stop on the way to the end directly, if you click again on the way back, it will stop at the beginning
})
// .stop() // Stop the current animation
// .stop(true) // Stop all animation
// .stop(true,true) // Stop all animations and reach the end of the animation
</script>
</body>
</html>
. Stop (); // stop the current animation, return to the starting point along the way, if you click again during the return process, will be suspended in the road
. Stop (true); // stop all animations on the way to the stop will be directly to the end, if the return process to click again, will be suspended in the road
Stop (true, true); // stop all animations, click stop on the way to the end point directly, if you click again on the way back, it will stop at the beginning point