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>

jQuery-метод stop() работает для всех эффектов jQuery, таких как fading, sliding, show и hide, а также пользовательских анимаций.

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

<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>

jQuery-метод stop(true, true) очищает все анимации в очереди и возвращает текущую анимацию к конечному значению.

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

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

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.