Home > Article > Web Front-end > How to terminate animation in jQuery
You can directly use the stop() function to immediately stop the currently ongoing animation. The purpose of this is to prevent the previous animation from affecting the effect of the subsequent animation.
In jQuery, it can be terminated through the stop() method. animation. It is generally used to switch between two animations. Because sometimes the mouse sliding too fast will cause the animation effect to be inconsistent with the mouse movement, then stop() is needed to stop the animation. Next, in the article, I will tell you how to use the stop method through specific examples
[Recommended course: jQuery Tutorial】
The stop() method is applicable to all jQuery effect functions, including sliding, fade-in and fade-out and custom animation, etc.
It has two parameters: stopAll, goToEnd
stopAll indicates whether the animation queue should be cleared. The default is false, which only stops active animations and allows any queued animations to be executed backwards
goToEnd indicates whether to complete the current animation immediately. The default is false.
Therefore, by default, stop() will clear the current animation specified on the selected element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#stop{
margin-bottom:10px;
}
#panel,#flip
{ width:200px;
padding:5px;
text-align:center;
background-color:pink;
border:solid 1px #ccc;
}
#panel
{
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击向下滑动</div>
<div id="panel">停止动画</div>
</body>
</html>Rendering:
Summary: The above is the entire content of this article. I hope this article can help everyone learn how to terminate animation.
The above is the detailed content of How to terminate animation in jQuery. For more information, please follow other related articles on the PHP Chinese website!