jQuery排队动画序列有延迟；需要重复答案

【问题标题】：Jquery queued animation sequence with delay; need to repeatjQuery排队动画序列有延迟；需要重复
【发布时间】：2012-09-24 23:07:54
【问题描述】：

我需要下面的代码，它会为一系列图像设置动画，运行然后无限期地重复。目前它在页面加载，然后刚刚完成。看动画的url是：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 });
});

【问题讨论】：

这里是链接：marisspillanewines.com/dev
它应该做什么？清理您的问题，以便它只是对问题的描述与您期望它做什么以及来源。我们很乐意为您提供帮助，请告诉我们您想要做什么。
用你目前的方法似乎是不可能的。尝试抽象动画所需的不同部分，您可能想要创建一个 jQuery 插件以方便使用。不要硬编码值，动态计算偏移量等......
我试图循环这个序列。所以当这一切结束时，它会重播。请查看我在上面评论的链接，了解动画的播放方式。抱歉，我想澄清一下，我只是不知道还能说什么。
问题是我需要为每张幻灯片设置不同的起始位置，我不确定如何制作该摘要。我不认为我会创建插件。

标签： jquery loops jquery-animate queue repeat

【解决方案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() 的短语法。

【讨论】：

非常感谢。感谢您的精彩解释。我已经实现了它，但我一定有什么问题。你能看看我的代码，看看我做对了吗？ marisspillanewines.com/dev
嗨，莫娜。我忘记了周围的块 $(function(){ ... });这使得代码在 dom-ready 事件上运行。目前它在不存在“.pic”元素时开始循环。
另一件事：ssrc="images/maris_CU.jpg" - ssrc 的“s”太多了。
然后你加载了一个不存在的脚本marisspillanewines.com/dev/scripts/jquery.path.js
动画循环效果很好 - 请参阅jsfiddle.net/creativecouple/WNHTK