Question

我想更改按钮的value和背景颜色。我尝试了以下代码，但它不起作用。任何人都可以告诉我如何更改按钮的值。例如，单击时我希望它显示Sent，将背景颜色更改为红色1秒，然后返回其原始值和背景颜色。有可能吗？

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的AnimateButton函数中调用complete，如下所示：

 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" />

更改backgroundcolor和值 - Jquery Animate按钮

2 个答案: