动画提交按钮的值更改

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>

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。

几乎可以肯定，这是极其冗长的。并且可以更加简洁......但它工作得足够好......如果这是任何安慰的话。