Animating submit button's value change

Question

I am submitting a form in my php application using the .ajax() function. If the form is successful I am changing the submit buttons text from "SUBMIT" to "MESSAGE SENT SUCCESSFULLY".

It works great, but I'd like to animate the button's value change instead of it just 'popping' to the next value.

I saw the fadeIn(), fadeOut(), and fadeTo() functions but I don't think these would work.

How can I do this? Thanks!

Answer 1

One approach I came up with:

$('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 demo.

This is, almost certainly, ridiculously verbose. And could be far more concise...but it works well enough...if that's any consolation.

Answer 2

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);});
    });
});

Gives you the general idea. If you wanted to do a crossfade, my thought would probably be put them in DIV's and fade the DIV's while also positioning them to overlay.

UPDATED

Crossfading:

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);
    });
});

With 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>