Home > Article > Web Front-end > Detailed explanation of jQuery stop() function

Detailed explanation of jQuery stop() function

巴扎黑Original: 2017-06-30 11:33:061510browse

For the stop() function, there are two parameters that can be filled in the brackets.

The prototype of the stop() function is like this: stop(stopall, finish); stopall and finish are its two parameters, and their values are true or false.

If the value of stopall is true, all actions in the animation queue will be stopped. Otherwise, only the current action will be stopped, and the next action in the animation queue will be carried out.

If the value of finish is true, the current action will immediately jump to the end and then stop (no matter what progress the current action reaches) (finish is studied separately here, and stopall is not involved, so only the current action is discussed, not animation. the next action in the queue), otherwise the current action will stop at its progress and will not jump to the end.

The default values of stopall and finish are both false, and stop(true) is equivalent to stop(true, false)

Finally, the code is provided for debugging

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
   p
   {
    height:200px;
	width:200px;
	background-color:#99ff99;
	position:relative;
   }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
   $("#start").click(function(){
	   $("#a1").animate({left:"400px"},5000);
	   $("#a1").animate({top:&#39;400px&#39;},5000);
	   $("#a1").animate({left:"0px"},5000);
	   $("#a1").animate({top:"0px"},5000);
   });
   $("#end").click(function(){
	   $("#a1").stop(false,true);
   });
  });
  </script>
 </head>
 <body>
  <button id="start">开始动画</button>
  <button id="end">停止</button>
  <p id="a1"></p>  
 </body>
</html>

The above is the detailed content of Detailed explanation of jQuery stop() function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Understanding the jQuery stop() methodNext article：Understanding the jQuery stop() method

See more

Detailed explanation of jQuery stop() function

Related articles