How to terminate animation in jQuery-JS Tutorial-php.cn

How to terminate animation in jQuery

清浅

Release： 2019-01-25 11:06:49

Original

3986 people have browsed it

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

How to terminate animation in jQuery

[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>

Copy after login

Rendering:

How to terminate animation in jQuery

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!