CODEWITHSUNDEEP
javascriptjquery
Patrick Reck
Patrick Reck

Reputation: 11374

Animating to another background-color, then back again

I'm trying to make my white background flash green. Currently I have this code which turns it green:

$( "#modal_newmessage" ).animate({
    backgroundColor: "#8bed7e"
}, 500 );

However, I can't figure how to make it turn white again in the same animation. How do I do this?

Upvotes: 3

Views: 4760

Answers (3)

Jai
Jai

Reputation: 74738

Try this:

$(function() {

    $( "#modal_newmessage" ).animate({
      backgroundColor: "#aa0000",
      color: "#fff",
      width: 500
    }, 1000 ).animate({
      backgroundColor: "#fff",
      color: "#000",
      width: 240
    }, 1000 );
});

note:

For animating background colors you need jQuery ui for color animation.

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

Upvotes: 1

Alexander
Alexander

Reputation: 23537

You can chain another .animate() call since the animations will be queued in the fx queue.

$("#modal_newmessage").animate({
  backgroundColor: "#8bed7e"
}, 500).animate({
  backgroundColor: "#fff"
}, 500);

Remember most jQuery functions are chainable without need to call $("#modal_newmessage") twice.

See it here.

Upvotes: 4

techfoobar
techfoobar

Reputation: 66693

This should work:

$( "#modal_newmessage" ).animate({
    backgroundColor: "#8bed7e"
}, 500, function() {
    $( "#modal_newmessage" ).animate({ backgroundColor: "#fff" });
} );

Upvotes: 1

Related Questions