Руководство по методу stop() в jQuery

jQuery-метод stop() используется для остановки анимаций или эффектов jQuery, запущенных в данный момент на выбранных элементах, до их завершения.

Базовый синтаксис метода stop() выглядит следующим образом:

$(selector).stop(stopAll, goToEnd);

Параметры в приведенном выше синтаксисе имеют следующие значения:

• Необязательный логический параметр stopAll указывает, удалять анимацию из очереди или нет. Значением по умолчанию является false — это означает, что только текущая анимация будет остановлена, остальные анимации в очереди будут выполняться позже.
• Необязательный логический параметр goToEnd указывает, следует ли завершить текущую анимацию немедленно. Значением по умолчанию является false.

Вот простой пример, демонстрирующий метод stop(), в котором вы можете запускать и останавливать анимацию по нажатию кнопки.

<script>
$(document).ready(function(){
    // Запускаем анимацию
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Останавливаем запущенную анимацию
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Запускаем анимацию в обратном направлении
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Восстанавливаем значения по умолчанию
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

Вот еще один пример этого метода, в котором, если вы снова нажмете кнопку «Переключить слайд» после запуска анимации, но до ее завершения, анимация начнется в противоположном направлении сразу от сохраненной начальной точки.

<script>
$(document).ready(function(){
    // Переключаем текущую скользящую анимацию
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

Создание эффекта плавного наведения

При создании анимированного эффекта наведения мыши одной из распространенных проблем, с которыми вы можете столкнуться, являются множественные анимации в очереди, когда вы быстро устанавливаете и удаляете курсор мыши.

Потому что в этой ситуации события mouseenter или mouseleave запускаются быстро до завершения анимации. Чтобы избежать этой проблемы и создать приятный и плавный эффект наведения, вы можете добавить stop(true, true) в цепочку методов, например:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>