Jquery 带有延迟的排队动画序列；需要重复

Question

我需要下面的代码，它可以对一系列图像进行动画处理，运行然后无限重复。目前它正在页面加载，然后刚刚完成。观看动画的网址是:http://marisspillanewines.com/dev/

谢谢!莫娜

$(document).ready(function (){
  $("#cork_CU").animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true });
  $("#fisherman_CU").delay(4800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true });
  $("#maris_CU").delay(8800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true });
  $("#capsule_CU").delay(12800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true });
  $("#numbers_CU").delay(16800).animate({left: '-20px',top:'-20px'}, { duration: 600, queue: true, ease:true });
  $("#fisherman_CU").delay(4800).animate({left: '-700px',top:'600px'}, { duration: 0, queue: true, ease:true });
  $("#maris_CU").delay(4800).animate({left: '-700px',top:'-600px'}, { duration: 0, queue: true, ease:true });
  $("#cork_CU").delay(4800).animate({left: '700px',top:'600px'}, { duration: 0, queue: true, ease:true });
  $("#capsule_CU").delay(4800).animate({left: '700px',top:'-600px'}, { duration: 0, queue: true, ease:true });
  $("#numbers_CU").delay(4800).animate({left: '700px',top:'-600px'}, { duration: 0, queue: true, ease:true });
});

Answer 1

对于 jQuery 中的此类计时问题，有一个 plugin jQuery-timing 。它将您的代码缩短为以下内容。我建议为图像提供一个通用的 CSS 类，例如“图片”:

var startLeft = $('.pic').each().css('left'),
    startTop = $('.pic').each().css('top'),
    targetPos = {left:-20,top:-20};

var $frame = $('.pic').parent();

function setBack(index) {
    this.css({left:startLeft[index], top:startTop[index]}).appendTo($frame);
}

$(".pic").repeat().each($).then(setBack).animate(targetPos,600).wait(4000);

此解决方案非常通用，因为它不依赖于帧中图像的实际数量。

通过使用 .appendTo($frame) 我们确保动画图像始终位于最上面。

.repeat()是来自该扩展的计时方法，以及通过 .each($) 的顺序循环，以及延迟函数 .wait(timeout) .

为了收集起始位置，我使用了带有并行 .each() 的短语法。 .