title: Using jQuery to change CSS attributes with delay
body: <p>How can i use <strong>jQuery</strong> to change the <strong>CSS</strong> attributes of a <strong>HTML</strong> element with delay.</p>
  
  <p>Imagine this scenario. I have a <code>div</code> with <code>bg color</code> blue. I want it to fade out and when it fades back in i want the <code>bg color</code> to be red.</p>
  
  <p>I tried this.</p>
  
  <pre><code>$("div").fadeOut().delay(500).css("background-color","red").fadeIn();
  </code></pre>
  
  <p>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.</p>