В этой статейке, я покажу как можно быстро и просто заблокировать действия до завершения анимации, вызванной с помощью jQuery aminate()
Очень часто бывает жизненно необходимо дождаться завершения анимации, случаи бывают разные — каруселька, галерея и многое другое.
Раньше я изобретал «велосипед» — добавлял всевозможные таймеры, блокировал страницу, и тд. Но сегодня полистав документацию jQuery, я наткнулся на интересную возможность функции animate(). Оказывается, помимо параметров анимации и скорости, эта функция может вызывать действия по завершению анимации.
Используя новые знания, я быстро набросал пример, который показывает, как можно заблокировать повторное выполнение анимации, пока не закончится старая.
Ниже приведен подробно прокомментированный код:
$(document).ready(function(){ // создаем действия при клике на кнопку var animateTest = function() { var widthElement = parseInt($(this).width()); var heightElement = parseInt($(this).height()); var stepZoom = 50; var speedAnimate = 1000; // перед запуском анимации снимаем все действия с кнопки // чтобы пользователь не мог сделать повторные клики $(this).unbind('click'); // запуск анимации $(this).animate( // анимация { width: (widthElement + stepZoom) + 'px', height: (heightElement + stepZoom) + 'px' }, // скорость анимации speedAnimate, // действие по завершению анимации (function(){ // как анимация завершиться "разблокируем кнопку" // навесим на нее опять действие $('#test_button').bind('click', animateTest); }) ); } // задаем действия для кнопки $('#test_button').bind('click', animateTest);}); |
И еще для теста добавим на страницу одну строчку html:
<input type="button" value="Click me" id="test_button" /> |
Статья взята с сайта:https://vk-book.ru/