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

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 m开发者_运维技巧ost 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?

Should be like this:

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

Hope this helps. Cheers

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.

I believe the following will work. As far as I understand the chaining with jQuery does not link attributes with animation effects. I could be wrong. By using the callback on the fade out though you can create the effect you want.

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