title: Background color change on page load
body: <p>This is my markup structure:</p>
  
  <pre><code>&lt;div class="authentication"&gt;
    &lt;div class="form-inputs"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I wanted that on page load the color of authentication slides down from top-bottom.
  The color is initially white and blue should slide down from the top. (like the header color fills the body).</p>
  
  <p>I tried this : </p>
  
  <pre><code>&lt;script&gt;
    jQuery(document).ready(function($) {
      $('.authentication').animate({backgroundColor: '#4BC5DA'}, 3000);
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>But it has a fade in effect :(</p>
  
  <p>After the color change i need the "form-inputs" should fade in ... i know i need to chain the actions but im not exactly getting it. </p>