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?

@Ben Fortune: The jQuery css() function does not need it. It assumes px — iCollect.it Ltd
– iCollect.it Ltd, Commented Nov 6, 2014 at 12:29

iCollect.it Ltd · Accepted Answer · 2014-11-06 13:02:36Z

3

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/

edited Nov 6, 2014 at 13:02

answered Nov 6, 2014 at 12:30

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Raghu Chandra Over a year ago

When i wanted to answer your (Same) answer was already here!! my fiddle goes here jsfiddle.net/raghuchandrasorab/zd5xweb6

iCollect.it Ltd Over a year ago

@Raghu Chandra: have used your JSFiddle, with credit. Thanks :)

pbaldauf Over a year ago

@TrueBlueAussie Thanks especially for the queued version. Works like a charm! Note: could you add a semicolon after ...$(window).height) for perfect valid js

iCollect.it Ltd Over a year ago

@pbaldauf: Glad it helped. I usually do add semi-colons after every statement, and I'll correct it, but on a single statement, inside a function scope, it is certainly optional. :)

Collectives™ on Stack Overflow

jQuery chaining css properties with delay

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related