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?

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. — George
– George, Commented Mar 13, 2014 at 20:14
@user3390776 You should really say that in your question it's not clear what you're looking for. Answer added none-the-less. — George
– George, Commented Mar 13, 2014 at 20:21
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. — DA.
– DA., Commented Mar 13, 2014 at 20:28

George · Accepted Answer · 2014-03-13 20:18:13Z

2

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

answered Mar 13, 2014 at 20:18

George

36.9k9 gold badges70 silver badges109 bronze badges

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

7 Comments

DA. Over a year ago

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 Over a year ago

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. Over a year ago

Yea, I totally assumed an animation but that serves me right for not re-reading the question! :)

Ruan Mendes Over a year ago

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 Over a year ago

@JuanMendes Probably, yeah.

|

Eduardo Quintana · Accepted Answer · 2014-03-13 20:16:36Z

1

Use jQuery animate()

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

Fiddle

answered Mar 13, 2014 at 20:16

Eduardo Quintana

2,3881 gold badge16 silver badges20 bronze badges

Comments

DA. · Accepted Answer · 2014-03-13 20:23:29Z

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)

Collectives™ on Stack Overflow

How do I add a pause in JavaScript?

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related