animate color changes for flicker effect in JQuery

I just spent quite some time trying to get some text to flicker, by having it change back and forth from one color to another. Sounds simple, turns out to be horridly difficult. The simple thing would be something like:

$('#myElement').animate({color:black}, 100);
$('#myElement').animate({co开发者_运维技巧lor:white}, 100);

Put this in a loop, repeat five times say, we are done. Well, does not work, even with the Jquery color plug in installed (which does stop browsers reporting errors but does not make the code work..).

What does work is this one:

    $('myElement').animate({top:0}, 100, function(){$('myElement').css('color','#000000');});
    $('myElement').animate({top:0}, 100, function(){$('myElement'.css('color','#ffffff');});

That is: don't do anything at all in the animate function, except use it as a timer, then change the css color value on the element. That's it. Works fine.

By the way: if you do this and want to stop something else happening while you are flickering the colors, you will have to put some kind of timer or flag in place -- remember that browsers will multitask and will go on executing in parallel while the colors are flickering. So if you want for example to disable the user choosing another menu choice while this one flickers, you will have to do this by disabling the other choices till this animation is done.

Chain your animations

$('#myElement').animate({color:black}, 100).animate({color:white}, 100);

If you want to stop running animation use jQuery.stop()

$('#myElement').stop();