.anlay()在.animate()之后被忽略

时间:2013-05-03 21:41:15

标签: jquery jquery-animate delay

我有一些div,它们应该相互扩展 必须延迟每个div的扩展动画,直到div之前的动画完成。这可以按预期工作。

在每一步的动画之后,我希望能够进一步延迟下一个div的动画。我的问题是,jQuery完全忽略了动画之后的延迟 在.delay()之后调用.animate()是否有任何问题?

这是我目前的代码:

$('div').each(function(index){
    $(this).delay(index*$stepspeed).animate({height: $stepheight[index]}, $stepspeed).delay((index+1)*$stepdelay+$startdelay);
});  

答案

我已使用if跳过第一个div的延迟解决了这个问题 这是我用过的代码:

$('div').each(function(index){
    if(index == 0) {$(this).delay($fadespeed).animate({height: $stepheight[index]}, $stepspeed);} //No delay for the first div
    else {$(this).delay($fadespeed+index*$stepspeed+(index+1)*$stepdelay+$startdelay).animate({height: $stepheight[index]}, $stepspeed);}
});

1 个答案:

答案 0 :(得分:0)

也许有一个更简单的解决方案,但这是我的解决方案(fiddle)。

在像时尚这样的循环中稍微超时后构建一个为每个div调用的函数:

$(function() {
    var el = $('div');
    lp(0);
    function lp(count){
        $(el.get(count)).animate({height: '200px'}, {duration: 500, queue: true, complete: function() {
            setTimeout(function(){
                if(count != el.length-1)
                {
                    count++;
                    lp(count);
                }
            }, 500);
        }});
    }
});