Question

我有这样的div：

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

如何在更改更多元素之前将width的css更改为100%（并等到达到100％）？

例如：

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

显然这不起作用，但我怎样才能使它发挥作用？

Answer 1

您可以在处理更多代码之前使用计时器等待：

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

JSFiddle

Answer 2

使用jQuery animate（）

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

Fiddle

Answer 3

你可以通过多种方式实现这一目标。一种方法是使用CSS转换：

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

.yourDiv.wide {
    width: 100%;
}

然后，要设置动画，请通过jQuery应用该类：

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

要在完成动画制作后执行某些操作，请使用webkitTransitionEnd事件：

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

如果您想在动画完成之后等待一段时间，然后再触发下一个样式更改，请将其包装在setTimeout中：

var $ yourDiv = $（'。yourDiv'）

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

小提琴：http://jsfiddle.net/22fPQ/1/

（注意以上是以webkit为中心。根据需要使用其他浏览器CSS前缀来支持）

如何在JavaScript中添加暂停？

3 个答案: