Of Stack

Detailed Explanation of jQuery stop of Usage Examples

  • 2021-07-06 09:47:53
  • OfStack

Looking at the previous code recently, I found that when using animate (), I need to add stop () to prevent the flashing problem of moving in and out, but I don't know the true meaning of the parameters in stop (). Today, I checked the meaning and specific usage of the parameters in stop () and shared them with you.

stop (true) is equivalent to stop (true, false): Stop all join-queue animation of the selected element.

stop (true, true): Stops all queued animation of the selected element, but allows the current animation to complete.

stop () is equivalent to stop (false, false): Stops the current animation of the selected element, but allows all animation of subsequent queues to be completed.

stop (false, true): Immediately ends the current animation to the final effect, and then completes all animations for future queues. 


$(selector).stop(stopAll,goToEnd)

stopAll: Optional. Specifies whether to stop all queued animation of the selected element.

goToEnd: Optional. Specifies whether the current animation is allowed to complete. This parameter can only be used when the stopAll parameter is set.

The first parameter means whether to empty the animation sequence, that is, whether to stop the animation effect of the current element or stop all the animation effects attached to it. 1 is generally false, skipping the current animation effect and executing the next animation effect;

The second parameter is whether to execute the current animation effect to the end, which means that when the current animation is stopped, the animation effect has just been executed for 1.5. What you want at this time is the effect after the animation is executed, so this parameter is true. Otherwise, the animation effect will stop when stop is executed.

The following is a small example found on the Internet, which is enough to help everyone understand the use of stop (). 


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>stop Usage case of </title>
<style type="text/css">
#animater{
width: 150px;
background:activeborder;
border: 1px solid black;
/* This property needs to be set in order to move */
position: relative;
}
</style>
<script type="text/javascript" src='/style/js/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
$(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
//  Click on a different button Perform different actions 
$('#button1').click(function(){
// The default parameter is false , regardless of writing 1 A false Or two false Still not written false Effect 1 Sample 
$('#box').stop();
});
$('#button2').click(function(){
// No. 1 2 Parameter default false
$('#box').stop(true);
});
$('#button3').click(function(){
$('#box').stop(false,true);
});
$('#button4').click(function(){
$('#box').stop(true,true);
});
})
</script>
</head>
<body>
<p><input type='button' value=' Begin testing ' id='start'></p>
<div id="button">
<input type="button" id="button1" value="stop()"/>
<input type="button" id="button2" value="stop(true)"/>
<input type="button" id="button3" value="stop(false,true)"/>
<input type="button" id="button4" value="stop(true,true)"/> 
</div>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">stop Motion parameter test </div>
</body>
</html>
Related articles: