更改背景颜色和值 - Jquery 动画按钮

Question

我想更改 value 和按钮的背景颜色。我尝试了以下代码，但它不起作用。另外，任何人都可以告诉我如何更改按钮的值。例如点击时我想让它显示Sent，将背景颜色更改为红色1s，然后恢复到原来的值和背景颜色。可能吗？

HTML

<input name="" type="button" class="send-btn" id="sendEmailByCustomer" onclick="SendEmailForCustomer(this)" value="Send It Now" />

动画代码：

var AnimateButton = function () {
    $('#sendEmailByCustomer').animate({ backgroundColor: 'red' }, 1000);
    //Show button value 'Sent' for some time then reset to original
}

从 Ajax 的 complete 函数中调用 AnimateButton，如下所示：

 function SendEmailForCustomer(obj) {

    var email = $('#txtEmail').val();
    var name = $('#txtName').val();
    var message = $('#txtMessage').val();

    var urlAddress = $("#SenEmailByCustomerURL").val();
    var dataToSend = JSON.stringify({ 'emailID': email, 'htmlBody': message, 'subject': name + " - " + email });
    $.ajax({
        url: urlAddress,
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: dataToSend,
        success: function (data) {
            var msg = data.result;
        },
        error: function (req, status, error) {
        },
        complete: function () {
            AnimateButton();
        }
    });
}

Answer 1

使用val()函数更新按钮值，然后使用回调重置值和颜色：

$("#sendEmailByCustomer").val("Sent").animate({ backgroundColor: 'red' }, 500, function() {
    $("#sendEmailByCustomer").val("Send it Now").animate({ backgroundColor: 'initial' }, 100);
})

查看我的FIDDLE

Answer 2

你可以使用类似的东西

function AnimateButton(color,value,opacity) {  
  $('#sendEmailByCustomer').attr('value',value).css('backgroundColor', color);  
  $('#sendEmailByCustomer').animate({opacity: opacity }, 'slow');
}

function SendEmailForCustomer(obj) {  
  AnimateButton('red','Sent',0.5)
  setTimeout(function(){AnimateButton('','Send It Now',1)},5000);  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="" type="button" class="send-btn" id="sendEmailByCustomer" onclick="SendEmailForCustomer(this)" value="Send It Now" />

更改背景颜色和值 - Jquery 动画按钮

change backgroundcolor and value - Jquery Animate button

jquery

button

jquery-animate