jquery - 动画提交按钮的值变化

Question

我正在使用 .ajax() 函数在我的 php 应用程序中提交表单。如果表单成功，我会将提交按钮文本从“提交”更改为“消息发送成功”。

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

我看到了 fadeIn()、fadeOut() 和 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>