Jquery switch through color instead of fade

Question

how can i have jquery switch between the array below on an elements font color?

colors1 = ["ffffff", "eeeeff", "ddddff", "ccccff", "bbbbff", "aaaaff", "9999ff", "8888ff", "7777ff", "6666ff", "5555ff", "4444ff", "3333ff", "2222ff", "1111ff", "0000ff"]

Basically what I'd like to do is have an element fade in and out using this array of colors. I tried using jQuery's animate (animate({opacity:1}, { queue: false, duration: 1500 })), but since we use IE at work 100% of the time, the opacity animation looks very poor in IE6/7. It looks really junky trough the animation and so does fadeIn and fadeOut. I dont have issues with filter as i know to remove it once the animation or fade is complete. I believe the new animation api removes filter as well automatically.

Terry Terry · Accepted Answer · 2011-12-01T22:38:29

Loop over time and change the CSS.

HTML:

<div id="test">Testing text</div>

JS:

var colors1 = ["ffffff", "eeeeff", "ddddff", "ccccff", "bbbbff", "aaaaff", "9999ff", "8888ff", "7777ff", "6666ff", "5555ff", "4444ff", "3333ff", "2222ff", "1111ff", "0000ff"]
var i = 0;

var animate = function switchColor() {
    if (i < colors1.length) {
        $('#test').css('color', '#' + colors1[i]);
        i++;
    } else {
        clearInterval(animate);
    }
}

$(document).ready(function() {
    setInterval(animate, 1000);
});

http://jsfiddle.net/kSsUL/38/

Jquery switch through color instead of fade

1 Answers