每个函数内的 JQuery queue/delay()答案

【问题标题】：JQuery queue/delay() inside each function每个函数内的 JQuery queue/delay()
【发布时间】：2011-12-13 06:08:02
【问题描述】：

我希望这个函数能够延迟每个函数内的每个动画。那是一个接一个。目前他们都一起度过难关。

$('.bounceholder ul:eq(' + bounceholder + ') li').each(function(){
            $(this).delay(1000).animate({left: bounceoffset, top:-8, opacity:0.6, leaveTransforms:true}, {duration:600, queue:true});
            bounceoffset += 160;
        });

【问题讨论】：

标签： jquery jquery-animate delay each

【解决方案1】：

function DoAnimation(items, delay, bounceOffSet) {
    $(items[0]).animate({left: bounceoffset, top:-8, opacity:0.6, leaveTransforms:true}, {duration:600, queue:true})
        .delay(delay)
        .promise()
        .done(function() {
            items.splice(0, 1);
            if (items.length > 0)
            {
                DoAnimation(items, delay, bounceOffSet + 160);    
            }            
    });       
}

var items = $('.bounceholder ul:eq(' + bounceholder + ') li');

DoAnimation(items, 1000, 0);

【讨论】：

【解决方案2】：

您传递给each 的块/函数可以接受计数器/索引作为第一个参数：

$('.bounceholder ul:eq(' + bounceholder + ') li').each(function(i){
  delay = (i + 1) * 1000
  $(this).delay(delay).animate({left: bounceoffset, top:-8, opacity:0.6, leaveTransforms:true}, {duration:600, queue:true});
  bounceoffset += 160;
});

【讨论】：