CODEWITHSUNDEEP
jquerycss
Blacksmith BG
Blacksmith BG

Reputation: 113

jQuery CSS executes after the command following it

I have a container and an inner div taking 100% of the container's width. I want the container to expand instantly, but keep the inner div at its currents dimensions and later expand it gradually using CSS transition. Here's the original JS Fiddle no. 1.

As that doesn't seem to work (why?), even though CSS should be applied instantly, I try to delay the addClass on the container with this JS Fiddle no. 2, which doesn't work either.

And finally, after setting a longer delay to the previous fiddle, it works with 1000ms instead of 100ms. So .css() takes effect after 1000ms, but doesn't after 100ms?!

Can anyone tell me why the .css() function behaves as if it works asynchronously?

Upvotes: 2

Views: 53

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

For the #1 to work, you need this code, take the .css() out of the setTimeout:

$('.inner').css({
  width: $('.inner').width() + 'px',
  height: $('.inner').height() + 'px'
});
setTimeout(function() {
  $('.container').addClass('big');
}, 1000);

You have wrapped everything inside setTimeout with 1000 ms, instead of $(function () {});.

Fiddle: http://jsfiddle.net/m7k9mre8/

Upvotes: 5

Related Questions