Метод stop - остановка запущенной анимации

Метод ⁅с⁆stop⁅/с⁆ позволяет нам немедленно остановить запущенную анимацию. Анимация продолжится уже со следующей функции без завершения предыдущей.

Синтаксис

Так мы останавливаем запущенную анимацию. Можно передать два необязательных параметра, которые принимают Булевы значения. Если первый параметр установить как true, то оставшиеся функции в очереди анимации будут удалены и никогда не запустятся. Если второй парметр установить в true, то при остановке анимации css-свойства элемента немедленно примут свои конечные значения (т.е., если целью было плавно скрыть элемент, то он будет скрыт мгновенно):

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

Можно также передать необязательный параметр, в котором указывается название очереди:

.stop([имя очереди], [clearQueue],[jumpToEnd]);

Анимацию можно отключить глобально, используя настройку jQuery.fx.off = true, которая устанавливает значение длительности в 0.

Пример

Давайте сделаем так, что бы при каждом клике по кнопке #toggle наш прямоугольник то разворачивался, то сворачивался с помощью метода slideToggle. Нажимайте на кнопку, не дожидаясь завершения анимации - следующий этап будет запускаться, не дожидаясь завершения предыдущего, благодаря методу ⁅с⁆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);
});

Смотрите также