How To: Animate background color change with jQuery

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

Posts

How To: Animate background color change with jQuery

2 thoughts on “How To: Animate background color change with jQuery”