Анимация изменения значения кнопки подтверждения - PullRequest
Новая
       7

Анимация изменения значения кнопки подтверждения

1 голос
/ 16 апреля 2011

Я отправляю форму в своем приложении php, используя функцию .ajax().Если форма успешна, я изменяю текст кнопок отправки с «ОТПРАВИТЬ» на «СООБЩЕНИЕ ОТПРАВЛЕНО УСПЕШНО».

Это прекрасно работает, но я бы хотел анимировать изменение значения кнопки, а не просто «всплывающее» следующее значение.

Я видел функции fadeIn(), fadeOut() и fadeTo(), но я не думаю, что они будут работать.

Как я могу это сделать?Спасибо!

Ответы [ 2 ]

2 голосов
/ 16 апреля 2011

http://jsfiddle.net/gZWby/

<input type="button" id="submit" value="SUBMIT"/>
<input type="button" id="sent" value="MESSAGE SENT SUCCESSFULLY" style="display: none;"/>

$(function(){
    $('#submit').click(function(){
        $(this).fadeOut(1000, function(){$('#sent').fadeIn(1000);});
    });
});

Дает вам общую идею.Если вы хотите сделать перекрестное затухание, я бы подумал поместить их в DIV и затемнуть DIV, а также расположить их для наложения.

ОБНОВЛЕНО

Перекрестное затухание:

http://jsfiddle.net/gZWby/1/

#submit, #sent {
  position: absolute;
  left: 0;
  top: 0;
}

#sent {
  display: none;
}

<div id="submit">
 <input type="button" value="SUBMIT"/>
</div>
<div id="sent">
 <input type="button" value="MESSAGE SENT SUCCESSFULLY"/>
</div>


$(function(){
    $('#submit').click(function(){
        $(this).fadeOut(1000);
        $('#sent').fadeIn(1000);
    });
});

С disabled="disabled"

http://jsfiddle.net/gZWby/2/

<div id="submit">
 <input type="button" value="SUBMIT"/>
</div>
<div id="sent">
 <input type="button" value="MESSAGE SENT SUCCESSFULLY" disabled="disabled"/>
</div>
1 голос
/ 16 апреля 2011

Один подход, который я предложил: 

$('form').submit(
    function(){
        $(this).trigger('success');
        return false;
    });

$('form').bind('success',
               function(){
                   var submitValue = 'form success!';
                   $('<input id="temp" type="submit" value="'+ submitValue +'" />')
                       .text(submitValue)
                       .appendTo('body');
                   var width = $('#temp').outerWidth();
                   $(this)
                       .find('input:submit')
                       .animate(
                           {
                               'color':'transparent'
                           }, 1500,
                                function(){
                                    $(this).val(submitValue);
                                })
                       .animate(
                           {
                               'color': '#000',
                               'width': width
                           }, 1500);
                   $('#temp').remove();
               });

Демонстрация JS Fiddle .

Это, почти наверняка, смешно многословно.И может быть гораздо более кратким ... но это работает достаточно хорошо ... если это утешит.

...