Question

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

效果很好，但我想设置按钮值的变化，而不是只是“弹出”到下一个值。

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

我该怎么做？谢谢！

Answer 1

<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

这几乎可以肯定是荒谬的。并且可以更加简洁......但它运作良好......如果这是任何安慰。

动画提交按钮的值更改

2 个答案: