jQuery chaining css properties with delay

Question

I have the following jQuery problem.

First I use height: auto; for my .container element so that a scrollbar is added if the .container content is bigger than the browsers window height. After 2 seconds the height should get the window height.

This is my current code in the $(document).ready(...) function:

$('.container').css('height', 'auto' ).delay(2000).css('height', $(window).height()); 

Currently the css('height', $(window).height()) doesn't get applied at all.

What is wrong with my jQuery chain?

Answer 1

css is immediate and not queued/delayable (like animate is).

Your options are use setTimeout or add them to the animation queue (or use methods that are queued).

e.g. using timer

   $('.container').css('height', 'auto' );
   setTimeout(function(){
        $('.container').css('height', $(window).height());
   }, 2000);

JSFiddle: (thanks to @Raghu Chandra) http://jsfiddle.net/zd5xweb6/

using a queue:

   $('.container').css('height', 'auto' ).delay(2000).queue(function(){
        $(this).css('height', $(window).height());
   });

JSFiddle: http://jsfiddle.net/zd5xweb6/1/