CODEWITHSUNDEEP
jquerybuttonjquery-animate
Huma Ali
Huma Ali

Reputation: 1809

change backgroundcolor and value - Jquery Animate button

I want to change value and background-color of my button. I tried the following code but it doesn't work. Also Can anybody give me any idea as to how can I change value of button. For example when clicked I want it to display Sent, change the background-color to red for 1s and then get back to its original value and background-color. Is it possible?

The HTML 

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

Animation code:

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

Calling AnimateButton from Ajax's complete function like this:

 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();
        }
    });
}

Upvotes: 1

Views: 46

Answers (2)

Jitendra Tiwari
Jitendra Tiwari

Reputation: 1691

You can use something like that

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

Upvotes: 0

pumpkinzzz
pumpkinzzz

Reputation: 2967

Use val() function to update the button value, then use a callback to reset value and color:

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

check my FIDDLE

Upvotes: 1

Related Questions