Как дождаться окончания анимации в 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" />