Using jQuery to change CSS attributes with delay

Using jQuery to change CSS attributes with delay

How can i use jQuery to change the CSS attributes of a HTML element with
delay.
Imagine this scenario. I have a div with bg color blue. I want it to fade
out and when it fades back in i want the bg color to be red.
I tried this.
$("div").fadeOut().delay(500).css("background-color","red").fadeIn();
While fading out the div already changes the color to red before it fades
in. It does not follow the sequence of chained events. How can I make this
happen in one single line.