Анимируем индикатор отправки формы используя кнопку «Отправить» для Ajax форм на JQuery и CSS

Сегодня не возможно представить онлайн-формы без ajax-сабмита.
Если раньше при сабмите формы страница перегружалась, и пользователь просто не мог дважды нажать на кнопку отправить, то теперь, если не закрыть доступ, то вызовется несколько ajax-запросов и соответственно засабмитится сразу несколько одинаковых форм. Можно конечно просто закрыть доступ для отправки формы, пока не выполнится запрос, но для пользователя понятнее и интереснее будет, если страница как-то покажет ему, что запрос обрабатывается, и пока ничего сделать нельзя (подумайте о людях с EDGE USB-модемами или вообще с Dial-up, они будут действительно долго ждать пока отправится ajax-запрос.
Не будем останавливать на отправки ajax запросов и обработке, попробуем сделать так, чтобы вместо кнопки «Отправить» появлялась анимированная кнопка отправить с бегущей полосой ожидания, до тех пор пока не выполнится запрос (при этом мы не будем использовать GIF, PNGa или Flash, только Jquery, CSS и капельку HTML).

function anima(){ if(!done) $('.a').animate({backgroundPosition:"-141px 0px"},1).delay(150).animate({backgroundPosition:"-281px 0px"},1,function(){ $('.a').delay(150).animate({backgroundPosition:"0px 0px"},1,function(){ anima(); }); })

} var done=false; $(function(){ anima(); $('.a').click(function(){ done!=done; }) })

Пример

Для того, чтобы сдеаль кнопку нам понадобится картинка, на подобие той, которую мы обычно делаем, для реализации метода Sliding Doors, такая, чтобы изображение кнопки повторялось несколько раз, и каждая из копий картинки будет отдельным кадром нашей анимации. У меня получилась такая вот картинка:


Теперь опишем CSS:

		.a{
			height: 26px;
			width: 127px;
			background: url('http://htmler.ru/wp-content/uploads/2011/02/telemart_comment_submit_anim.png') no-repeat 0px 0px;
		}

Предположим, что блок с анимацией будет иметь ClassName=a.
А теперь опишем функцию, которая будет анимировать нашу кнопку-загрузчик:

			function anima(){	
				if(!done)
				$('.a').animate({backgroundPosition:"-141px 0px"},1).delay(150).animate({backgroundPosition:"-281px 0px"},1,function(){
					$('.a').delay(150).animate({backgroundPosition:"0px 0px"},1,function(){
						anima();
					});
				})
				
				
			}

Поясню: до тех пор пока переменная done==false рекурсивно сменяем положение бэкграунда для анимированного блока, всего и делов.
Теперь нужно все это дело привязать к отправке формы. Напишем обработчик на JQuery:

$('form').submit(function(e){
	e.preventDefault();//отменяем действие формы по умолчанию
	done=false;
	$('input.submit').fadeOut();
	$('.a').fadeIn();
	anima();
	$.ajax({
		url: "submit.php",
		success: function()
		{
			done=true;
			$('input.submit').fadeIn();
			$('.a').fadeOut();			
		}
	})
})

Вот и все. Теперь по сабмиту формы кнопка «Отправить» исчезнет, вместо нее появится анимированный блок, который будет анимироваться до тех пор, пока ajax запрос не завершиться успешно, после чего кнопка «Отправить» снова появится, а анимированный блок перестанет анимироваться и исчезнет.

---

Кто не верит, смотрите:
Demo

---

Примечание

Если вы использует не самую новую версию Jquery, то у вас нет функции delay(), поэтому следует заменить ее везде, где она вызывается в статье на что-то другое, убивающее время, например, на

.animate({fontSize:0},150)

Примечание (еще одно)

В своём примере скорость анимации определяется задержками в паказе «кадров» анимации, и для моей картинки эти задержки равны 150мс, но для других картинок все может быть по-другому, нужно подбирать по вкусу.