Pulsating colors in javascript

Question

I'd like to have some text pulsate between red and black. Figured I'd use jQuery UI's animate function to do so. Seems simple enough... something like:

function pulseRed() {
    $('.pulsing').animate({ color: "red" }, 1000, pulseBlack);
}
function pulseBlack() {
    $('.pulsing').animate({ color: "black" }, 1000, pulseRed);
});

My concern is how efficient this is. If I have a lot of text in different places to pulsate, should I instead somehow alter the CSS stylesheet rule for .pulsing? Is it safe to have an infinite loop between functions like that or am I going to get in trouble for stacking too many function calls?

I'm already using jQuery and jQuery UI, so I don't mind at all using the animate color mechanism above... but if there's a better solution I'd love to hear it.

Answer 1

If you are using jQuery UI you might want to consider using the animated toggle class instead, if you wrapped that in a setInterval() function you could reduce it to one line, and store the formatting in the CSS rather than the javascript.