jQuery функция .stop()

Раздел: Эффекты jQuery

Описание: Останавливает в данное время работающюю анимацию на соответствующие элементы

.stop( [ очистить Очередь ], [ прыгнуть В Конец ] )

Очистить очередь

Логическое значение указывающее удалить ли очередь анимации. Значение по умолчанию - false.

Прыгнуть в конец

Логическое значение указывающее закончить ли текущюю анимацию немедленно. Значение по умолчанию - false.

Когда .stop() вызывается на элемент, работающяя в данный момент анимация (если имеется) немедленно останавливается. Если, например, элемент скрывается с помощью .slideUp(), когда вызван .stop(), элемент по-прежнему будет отображаться, но только будет урезан по высоте. Функция обратного вызова не вызывается.

Если вызывается более чем один метод на тот же элемент, более поздние анимации будут поставлены в очередь на эффекты элемента. Эти анимации начнутся не ранее того как первая завершается. Когда вызывается .stop(), следующяя анимация в очереди начинается немедленно. Если параметр clearQueue установлен в значение true, то остальные анимации в очереди будут удалены и никогда не будут запущенны.

Если свойство jumpToEnd установленно в значение true, текущая анимация будет остановлена, и элемент немедленно передаст целевые значения для каждого свойства CSS. В примере выше со .slideUp(), элемент будет немедленно скрыт. Функция обратного вызова будет немедленно вызвана, если предоставлена.

Мы можем создать красивый эффект плавного перехода без обычных проблем нескольких очередей анимации, добавив .stop(true, true) к цепочке:

Все эффекты jQuery, включая .stop(), могут быть выключены глобально с помощью установки jQuery.fx.off = true.

Живые примеры:

Пример № 1

html:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop demo</title>
  <style>
  div {
    position: absolute;
    background-color: red;
    left: 0px;
    top: 30px;
    width: 60px;
    height: 60px;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script >
</head>
<body>
 
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
 
<script>
// Начать анимацию
$( "#go" ).click(function() {
  $( ".block" ).animate({ left: "+=100px" }, 2000 );
});
 
// Остановить анимацию при нажатии кнопки
$( "#stop" ).click(function() {
  $( ".block" ).stop();
});
 
// Запуск анимации в противоположном направлении
$( "#back" ).click(function() {
  $( ".block" ).animate({ left: "-=100px" }, 2000 );
});
</script >
 
</body>
</html>

Нажмите один раз кнопку Вперед, чтобы начать анимацию, а затем нажмите кнопку Стоп , чтобы остановить её, где она в настоящий момент находится. ВЫ увидите, что .stop() просто останавливает процесс.

Пример № 2

html:
<!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-1.10.2.js"></script >
</head>
<body>
 
<button id="toggle">slideToggle</button>
<div class="block"></div>
 
<script>
var $block = $( ".block" );
 
// Переключение анимации скольжения
$( "#toggle" ).on( "click", function() {
  $block.stop().slideToggle( 1000 );
});
</scrip >
 
</body>
</html>
  

Анимация будет меняться в другом направлении от сохраненной исходной точки, не дожидаясь окончания анимации