Остановка анимации методом stop()

В предыдущей главе мы увидели, как можно создавать собственные анимации с помощью метода animate() и как можно запустить несколько анимаций одну за другой, используя несколько вызовов подряд и тем самым формируя очередь анимаций. Однако, иногда требуется остановить анимацию до того, как она завершится, и для этого в jQuery существует метод stop(). Он работает для всех эффектов, включая скольжение, растворение и пользовательские анимации, созданные через animate(). Вот пример использования данного метода:

<a href="javascript:void(0);" onclick="$('#divTestArea1').slideDown(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea1').stop();">Stop</a>

<div id="divTestArea1" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Для большей компактности я использовал встроенные (inline) вызовы в событиях onclick для двух ссылок. Когда вы нажимаете на первую ссылку, метод slideDown() применяется к нашему блоку div, и он начинает смещаться вниз. Нажатие на вторую ссылку прерывает текущую анимацию на выбранном элементе. Это поведение метода stop() по умолчанию, но два необязательных параметра позволяют менять порядок вещей. Первый параметр определяет, нужно ли очистить очередь анимаций. По умолчанию она равен false, т.е. прерывается только текущая анимация, и если в очереди есть другие анимации, они начнут выполняться. Это поведение демонстрирует следующий пример:

<a href="javascript:void(0);" onclick="$('#divTestArea2').slideDown(5000).slideUp(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').stop();">Stop</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').stop(true);">Stop all</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').clearQueue().hide();">Reset</a>

<div id="divTestArea2" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Мы добавили вторую анимацию ссылке "Show box" (показать блок). Таким образом, блок сначала начнет медленно сдвигаться вниз, и по завершении будет двигаться в обратную сторону. Система очередей гарантирует, что все анимации выполнятся по порядку. Теперь, нажмите на ссылку "Reset" (сброс), чтобы опять скрыть блок, и затем снова "Show box" и нажмите "Stop" (остановить) до того, как завершится первая анимация. Вы увидите, как первая анимация завершится, позволив выполниться второй. Однако, если вы попробуете еще раз, и вместо "Stop" нажмете "Stop all" (остановить все), в метод будет передан параметр true, так что очистится вся очередь и остановятся все анимации.

Второй параметр сообщает jQuery, хотите ли вы остановить анимацию немедленно, или наоборот, вам нужно позволить текущей анимации завершиться. Это действительно значительное отличие, ведь, как вы видели в первом примере, как только вы нажали "стоп", по умолчанию анимация остановилась ровно там, где она была, и элемент остался в "подвешенном" состоянии. Следующий пример демонстрирует разницу:

<a href="javascript:void(0);" onclick="$('#divTestArea3').slideDown(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true);">Stop</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true, true);">Stop but finish</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').clearQueue().hide();">Reset</a>

<div id="divTestArea3" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Попробуйте разные варианты остановки анимации - первый останавливает немедленно, в то время как второй заставляет анимацию завершиться.