javascript - Background color change on page load -

this markup structure:

<div class="authentication">   <div class="form-inputs"></div> </div> 

i wanted on page load color of authentication slides down top-bottom. color white , blue should slide down top. (like header color fills body).

i tried :

<script>   jquery(document).ready(function($) {     $('.authentication').animate({backgroundcolor: '#4bc5da'}, 3000);   }); </script> 

but has fade in effect :(

after color change need "form-inputs" should fade in ... know need chain actions im not getting it.

you can use dynamic overlay slidedown() animation , fade form when animation completes using callback argument:

$blue = $('<div>').css({     background: 'blue',     position: 'absolute',     width: '100%',     height: '100%',     top: '0',     display: 'none' }).appendto('.authentication').slidedown('slow', function(){     $('.form-inputs').fadein(); }); 

demo fiddle

if want "smoother" animation jquery ui's easing functions, can use of them parameter in slidedown() (of course need include jquery ui project) or can combine slide effect fade effect, example here