动画提交按钮的值更改

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。

这是，几乎可以肯定，可笑冗长。而且可以更加简洁......但它运作得很好......如果这是任何安慰。