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:
- var colors = ["red", "orange", "yellow", "green", "blue"]
- var i = 0;
-
- $("#myDiv").css("background-color","red");
-
- function changeColor()
- {
- i++;
- i=i%5;
- $("#myDiv").animate({backgroundColor: colors[i]},1000);
- setTimeout(changeColor,2500);
- }
-
- 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!