Animate to a different background color, then back

I am trying to make my white background green. I currently have this code that turns it green:

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

      

However, I can't figure out how to get it to rotate to white again in the same animation. How to do it?

+3


source to share


3 answers


You can chain another call .animate()

as the animations will be queued in the queue fx

.

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

      



Remember, most jQuery functions can be grouped together without having to be called $("#modal_newmessage")

twice.

Look at here.

+4


source


This should work:



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

      

+1


source


Try the following:

$(function() {

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

      

Note:

To animate background colors, you need jQuery ui

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>

      

+1


source







All Articles