Сегодня не возможно представить онлайн-формы без 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мс, но для других картинок все может быть по-другому, нужно подбирать по вкусу.