problem initiating jquery in color fade

problem initiating jquery in color fade

Hello,

I am new to jquery, having just read a bit and worked through 5 tutorials as part of Jeffrey Way's  30 Days to Learn jQuery over at tuts+.

I have experience with actionScript and am now trying my hand at HTML5/CSS3 + jQuery. 

What I am specifically trying to do is to fade between the background colors of a div.  I have an example using a simple array + a function that works great at jsfiddle:  http://jsfiddle.net/johnkoer/8GGFM/26/

I am being humbled by asking this question for sure, but I cannot replicate the example in jsfiddle, despite the html and css and javaScript all being present in jsfiddle. 

Here is the script that runs swell on jsfiddle:
  1. var colors = ["red", "orange", "yellow", "green", "blue"]
  2. var i = 0;

  3. $("#myDiv").css("background-color","red");

  4. function changeColor()
  5. {
  6.     i++;
  7.     i=i%5;
  8.     $("#myDiv").animate({backgroundColor: colors[i]},1000);
  9.     setTimeout(changeColor,2500);
  10. }

  11. changeColor();

In my own document, the initial jquery object which changes the css to red works great when I load the page, however the changeColor function is not running.  I'm not sure if I need to put the function into the body of my html and add a method to initiate the changeColor function, though it runs as is in the jsfiddle using the whatever browser I try it with.  

Any suggestions would be much appreciated!