如何在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?

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

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)