.stop( [clearQueue ] [, jumpToEnd ] )Возвращает: jQuery
Описание: Останавливает текущую анимацию на сопоставленных элементах.
-
версия добавлена: 1.2.stop( [clearQueue ] [, jumpToEnd ] )
-
версия добавлена: 1.7.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )
- очередьТип: StringИмя очереди, в которой нужно остановить анимации.
- clearQueue (по умолчанию:
false)Тип: BooleanЛогическое значение, указывающее на удаление всех анимаций из очереди. По умолчаниюfalse. - jumpToEnd (по умолчанию:
false)Тип: BooleanЛогическое значение, указывающее на немедленное завершение текущей анимации. По умолчаниюfalse.
-
При вызове .stop() на элементе, текущая анимация (если она есть) немедленно останавливается. Например, если элемент скрывается с помощью .slideUp() и затем вызывается .stop(), элемент останется видимым, но его высота будет частью от предыдущей. Обработчики событий не вызываются.
Если на одном элементе вызывается несколько методов анимации, последующие анимации помещаются в очередь эффектов для этого элемента. Эти анимации начнутся только после завершения первой. Когда вызывается .stop(), следующая анимация в очереди начинается немедленно. Если параметр clearQueue имеет значение true, оставшиеся анимации в очереди удаляются и никогда не выполняются.
Если параметр jumpToEnd имеет значение true, текущая анимация останавливается, но элементу немедленно присваиваются целевые значения для каждого CSS-свойства. В нашем примере .slideUp(), элемент будет немедленно скрыт. Обработчик событий, если он был задан, вызывается немедленно.
Начиная с jQuery 1.7, если первый аргумент задан как строка, остановятся только анимации в очереди, представленные этой строкой.
Полезность метода .stop() очевидна, когда нам нужно анимировать элемент при mouseenter и mouseleave:
<div id="hoverme"> Hover me <img id="hoverme" src="book.png" alt="" width="100" height="123"> </div>
Мы можем создать плавный эффект плавного перехода без общей проблемы множественных анимаций в очереди, добавив .stop(true, true) в цепочку:
$( "#hoverme-stop-2" ).hover(function() {
$( this ).find( "img" ).stop( true, true ).fadeOut();
}, function() {
$( this ).find( "img" ).stop( true, true ).fadeIn();
}); Переключение анимаций
Начиная с jQuery 1.7, преждевременное прекращение переключаемой анимации с помощью .stop() запустит внутренний отслеживающий механизм jQuery. В предыдущих версиях вызов метода .stop() до завершения переключаемой анимации приводило к потере состояний анимации (если jumpToEnd был false). Любые последующие анимации начинались с нового «полу-состояния», иногда приводя к исчезновению элемента. Чтобы наблюдать за новым поведением, см. окончательный пример ниже.
Анимации могут быть остановлены глобально, установив свойство $.fx.off в true. Когда это делается, все методы анимации немедленно устанавливают элементы в конечное состояние при вызове, а не отображают эффект.
Примеры:
Нажмите кнопку «Начать» один раз, чтобы запустить анимацию, затем нажмите кнопку «СТОП», чтобы остановить её в текущем положении. Другой вариант — нажать несколько кнопок, чтобы добавить их в очередь, и увидеть, что stop просто убивает текущую воспроизводимую.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stop demo</title>
<style>
div {
position: absolute;
background-color: #abc;
left: 0px;
top: 30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
<script>
// Start animation
$( "#go" ).on( "click", function() {
$( ".block" ).animate({ left: "+=100px" }, 2000 );
});
// Stop animation when button is clicked
$( "#stop" ).on( "click", function() {
$( ".block" ).stop();
});
// Start animation in the opposite direction
$( "#back" ).on( "click", function() {
$( ".block" ).animate({ left: "-=100px" }, 2000 );
});
</script>
</body>
</html> Демо:
Нажмите кнопку «slideToggle», чтобы запустить анимацию, затем снова нажмите, прежде чем анимация завершится. Анимация переключится в другом направлении от сохранённой начальной точки.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stop demo</title>
<style>
.block {
background-color: #abc;
border: 2px solid black;
width: 200px;
height: 80px;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<button id="toggle">slideToggle</button>
<div class="block"></div>
<script>
var $block = $( ".block" );
// Toggle a sliding animation animation
$( "#toggle" ).on( "click", function() {
$block.stop().slideToggle( 1000 );
});
</script>
</body>
</html> 
