jquery - 动画提交按钮的值更改

我正在使用.ajax()函数在php应用程序中提交表单。如果表格成功，我将提交按钮的文本从“ SUBMIT”更改为“ MESSAGE SENT SUCCESSFULLY”。

它的效果很好，但是我想为按钮的值更改设置动画，而不是只是“弹出”到下一个值。

我看到了fadeIn()，fadeOut()和fadeTo()函数，但我认为它们不起作用。

我怎样才能做到这一点？谢谢！

最佳答案

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>