Категории: Эффекты jQuery > Пользовательская анимация
.stop( [ очиститьОчередь ] [, прыгнутьВКонец ] )
Возвращает: jQuery
Описание: Останавливает в данное время работающую анимацию на соответствующие элементы.
.stop( [ очиститьОчередь ] [, прыгнутьВКонец ] )
Добавлена в версию: 1.2
очиститьОчередь
Логическое значение указывающее удалить ли очередь анимации. Значение по умолчанию - false.
прыгнутьВКонец
Логическое значение указывающее закончить ли текущую анимацию немедленно. Значение по умолчанию - false.
.stop( [ очередь ][, очиститьОчередь ] [, прыгнутьВКонец ] )
Добавлена в версию: 1.7
очередь
Имя очереди, чтобы остановить анимацию.
очиститьОчередь
Логическое значение указывающее удалить ли очередь анимации. Значение по умолчанию - false.
прыгнутьВКонец
Логическое значение указывающее закончить ли текущую анимацию немедленно. Значение по умолчанию - 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) к цепочке:
Переключение анимации
Начиная с jQuery 1.7, преждевременная остановка анимации с помощью .stop() вызовет внутренний эффект слежения jQuery. В предыдущих версиях, вызов метода .stop() перед тем как переключающаяся анимация была завершена приводило к тому, что анимация теряла свое состояние (если прыгнутьВКонец установлен в false). Любые последующие анимации начинающиеся по новой из состояния "на полпути" иногда приводят к тому, что элемент исчезает. Чтобы наблюдать за новым поведением, см. последний пример ниже.
Анимация может быть остановлена глобально с помощью установки свойства
$.fx.offвtrue. Когда это сделано, все методы анимации элементов будут немедленно установлены в их конечное состояние при вызове, и эффект анимации не будет запущен.
Примеры
Пример
Нажмите кнопку «Go» для запуска анимации, затем нажмите «STOP» для остановки. Кнопка «STOP» останавливает лишь текущий эффект, но не очищает всей очереди эффектов.<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ // Start animation $("#go").click(function(){ $(".block").animate({left: '+=100px'}, 2000); }); // Stop animation when button is clicked $("#stop").click(function(){ $(".block").stop(); }); // Start animation in the opposite direction $("#back").click(function(){ $(".block").animate({left: '-=100px'}, 2000); }); }); </script> <style>div { position: absolute; background-color: #abc; left: 0px; top:30px; width: 60px; height: 60px; margin: 5px; } </style> </head> <body> <button id="go">Go</button> <button id="stop">STOP!</button> <button id="back">Back</button> <div class="block"></div> </body> </html>
Пример
Нажмите на кнопку slideToggle, чтобы запустить анимацию, а затем нажмите еще раз, прежде чем анимация завершена. Анимация переключится в другом направлении из сохраненной отправной точки<!DOCTYPE html>
<html>
<head>
<style>.block {
background-color: #abc;
border: 2px solid black;
width: 200px;
height: 80px;
margin: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.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>
Была ли эта информация полезной?
