動畫提交按鈕的值更改

Question

我使用.ajax()函數在我的php應用程序中提交表單。如果表單成功，我將提交按鈕文本從「提交」更改爲「已成功發送郵件」。

它的效果很好，但我想動畫按鈕的值變化，而不是它'彈出'到下一個值。

我看到了fadeIn(),​​和fadeTo()的功能，但我不認爲這些功能可行。

我該怎麼做？謝謝！

Answer 1

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> 

Answer 2

一種方法，我想出了：

$('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。

這是，幾乎可以肯定，可笑冗長。而且可以更加簡潔......但它運作得很好......如果這是任何安慰。