finish()

посл. ред. 26.10.2016

Метод finish() используется для мгновенного завершения текущей анимации и следующих анимаций в очереди. Всем параметрам устанавливаются конечные значения всех анимационных эффектов в очереди. Для завершения только текущей анимации используется метод stop().

Варианты использования

jQ_object.finish([имя_очереди]) => jQuery: Для каждого элемента текущей выборки мгновенно завершает выполнение текущей анимации и остальных анимаций в очереди. Если имя очереди не указано, тогда используется стандартная очередь fx.

Можно глобально отменить все анимации на странице и сразу устанавливать конечные значения CSS-свойствам. Для этого необходимо присвоить глобальному параметру jQuery.fx.off значение true.

Примеры

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button class="button_start">Старт</button>
  <br>
  <button class="button_stop">stop(true, true)</button>
  <button class="button_finish">finish()</button>
  <div style="width: 50px; height: 50px; background: coral; position: relative"></div>
</body>
</html>
 
<script>
$('.button_start').on('click', function() {
  $('div')
    .css({
      width: '50',
      left: '0'
    })
    .animate({width: 100}, 1000)
    .animate({left: 200}, 1000)
    .animate({width: 50}, 1000);
});
$('.button_stop').on('click', function() {
/* Завершает только текущую анимацию, а остальные отменяет */
  $('div').stop(true, true);
});
$('.button_finish').on('click', function() {
/* Завершает все анимации в очереди */
  $('div').finish();
});
</script>