[jQuery] Create an array of colors for text hover effect.
I'm trying to create a fun effect when you hover over a character it
changes to a color (from an array) and then fades to white on roll-
out. I'm experiencing a bit of an issue. For some reason, the color
stays the same in the array. My guess is the value isn't increasing
the way I think it would. Here's my code:
function rainbow(){
var colors = Array(
"#00ADEF",
"#EC008B",
"#F36523",
"#8CC63E"
);
var c=0;
var chars = $("#text").html().split("");
var newString = "";
for(var i=0; i < chars.length; i++){
if(chars[i] != " " && chars[i] != "."){
newString += "<span>"+chars[i]+"</span>";
} else {
newString += chars[i];
}
}
$("#text").html(newString);
$("#text span").each(function(e){
$(this).hover(
function(i){
$(this).css("color",colors[c]);
},
function(o){
$(this).animate({
color:"#FFF"
},
{duration:300});
}
);
c++;
if(c >= colors.length){ c=0; }
});
}
I'm using the effects core so this is working, but it's all one color.
It should be 4. Has anyone done anything like this before? Is there a
better way?