Как дождаться окончания анимации в jQuery

В этой статейке, я покажу как можно быстро и просто заблокировать действия до завершения анимации, вызванной с помощью 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" />

Статья взята с сайта:http://vk-book.ru/

Реклама