How do I add a pause in JavaScript?

Question

I have a div like this:

<div style="width: 0%;"></div>

How can I change the css of width to 100% (and wait until it reaches 100%) before changing more elements?

For example:

$('div').css('width', '100%', function() {
 $('div').css('color', 'red');
});

Obviously this doesn't work, but how can I make it work?

• George: What do you mean wait until the width is 100%? Do you have some CSS transitions enabled? Otherwise this change is instant and there's no 'waiting' period.
• j0hnstew: Do you want to animate the css?
• Blazemonger: possible duplicate of CSS3 transition events
• George: @user3390776 You should really say that in your question it's not clear what you're looking for. Answer added none-the-less.
• DA.: Define 'wait'. Are you wanting to animate the change to 100% width? Or is it just an instantaneous thing? If the latter, there is no need to wait.

Answer 1

You can just use a timer to wait before processing some more code:

$('div').css('width', '100%');
setTimeout(function(){
 $('div').css('color','red');
}, 2000);

JSFiddle

• DA.: I was going to say this doesn't handle the animation, but now that I re-read the question, I'm not sure animation is a part of the question. Hrm...
• George: There's no mention of animation in the question, which is why I was a little confused by the other answers, I guess they are based on assumptions? This is based on the comment that the OP left.
• DA.: Yea, I totally assumed an animation but that serves me right for not re-reading the question! :)
• Ruan Mendes: There's no waiting for anything to finish here... Should the question be, "How can I do something and then do something x seconds later?"
• George: @JuanMendes Probably, yeah.

Answer 2

Use jQuery animate()

$("div").animate({
 width:"100%" 
 }, 2000, function() {
 //On Animation complete
 $('div').css('color', 'red');
 });

Fiddle

Answer 3

You can do it a number of ways. One way is to use CSS transitions:

.yourDiv {
 width: 0%;
 -webkit-transition: width;
 -webkit-transition-duration: 3s;
 background: yellow;
}
.yourDiv.wide {
 width: 100%;
}

Then, to animate, apply the class via jQuery:

$('.yourDiv').addClass('wide')

To do something after it's done animating, use the webkitTransitionEnd event:

$('.yourDiv')
 .addClass('wide')
 .one('webkitTransitionEnd', function(){
 $('this').css('background','red')
 })

If you wan to wait for a period of time after the animation finished before triggering your next style change, wrap it in a setTimeout:

var $yourDiv = $('.yourDiv')

$yourDiv
 .addClass('wide')
 .one('webkitTransitionEnd', function(){
 setTimeout(function(){
 $yourDiv.css('background','red')
 },2000)
 })

fiddle: http://jsfiddle.net/22fPQ/1/

(note the above is webkit-centric. Use other browser CSS prefixes as needed to support)