Home

How To: Animate background color change with jQuery

Posted by SteveHardie | On: Aug 04 2013

This article will show briefly guide you through how to smoothly animate a background color change using jQuery.

jQuery Version: 1.9.1
jQuery UI: 1.10.3

First, make sure you have linked to both jQuery and jQueryUI.
Put this code in you <head> section of your page.

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

Then add this code anywhere on your page and update the colors list to the colours you want to use.
Change the changeInterval variable to the time in milliseconds to wait before changing the background color.

    var colours=['#ff0000','#00ff00','#0000ff','#acacac'];  // List of colors
    var tempID=0;
    var changeInterval=2000;    // Change interval in miliseconds
    var objectID='#bgDiv';      // Object to change colours. 
    
    $(document).ready(function(){        
        setInterval(function(){
                $(objectID).animate({backgroundColor: colours[tempID]},500);
                tempID=tempID+1;
                if (tempID>colours.length-1) tempID=0;
            },changeInterval);
    });

See also:
jQuery Colour Animation

2 Comments

  1. marie says:

    This has worked great for me thankyou!
    One question, is it possible to set an opacity on this?

  2. Marie says:

    It’s okay, I figured out that it needs to be changed to rgb values to add in opacity and that seems to work for me [not tested on ie]
    rgba(255,255,255,0.5)

Leave a comment