The stop method

The stop method allows us to immediately stop the running animation. The animation will continue with the next function without finishing the previous one.

Syntax

This is how we stop a running animation. You can pass two optional parameters that take Boolean values. If you set the first parameter to true, the remaining functions in the animation queue will be removed and will never run. If you set the second parameter to true, then when the animation is stopped, the CSS properties of the element will immediately take their final values (i.e., if the goal was to smoothly hide the element, it will be hidden instantly):

.stop([clearQueue], [jumpToEnd]);

You can also pass an optional parameter that specifies the name of the queue:

.stop([queue name], [clearQueue],[jumpToEnd]);

Animation can be disabled globally using the setting jQuery.fx.off = true, which sets the duration value to 0.

Example

Let's make it so that with each click on the button #toggle our rectangle would either expand or collapse using the method slideToggle. Click on the button without waiting for the animation to complete - the next stage will be launched without waiting for the previous one to complete, thanks to the method stop:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	background-color: green;
	border: 1px solid black;
	width: 200px;
	height: 100px;
	margin: 10px;
}

$('#toggle').on('click', function() {
	$('#test').stop().slideToggle(1500);
});

The stop method

Syntax

Example

See also