Why doesn't this jQuery change my text to red before turning it blue?

Question

I have the following jquery that is triggered when a part of my page is clicked.

$('#my_link').css("color", "red").delay(500).fadeOut(500).css("color", "blue").fadeIn(500)

I can see most of the animations happening like the fadeOut and fadeIn but I never see the text turn red. I only see it turn blue. Any idea why?

Answer 1

Should be like this:

$('#my_link').css("color", "red").delay(500).fadeOut(500, function(){
   $(this).css("color", "blue").fadeIn(500);
});

Hope this helps. Cheers

Answer 2

The order in which the function will be executed will be

css red --> css blue --> fadeOut --> delay --> fadeIn

http://jsfiddle.net/dXSga/

the .delay() method allows us to delay the execution of functions that follow it in the queue. This will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

In short the .delay() wont delay css() which doesnt use a jQuery effect.