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

Posted 2023-05-08

【中文标题】jQuery排队动画序列有延迟；需要重复

【英文标题】：Jquery queued animation sequence with delay; need to repeat

【发布时间】：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 插件以方便使用。不要硬编码值，动态计算偏移量等......

我试图循环这个序列。所以当这一切结束时，它会重播。请查看我在上面评论的链接，了解动画的播放方式。抱歉，我想澄清一下，我只是不知道还能说什么。

问题是我需要为每张幻灯片设置不同的起始位置，我不确定如何制作该摘要。我不认为我会创建插件。

【参考方案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”元素时开始循环。

另一件事：s-s-rc="images/maris_CU.jpg" - s-s-rc 的“s”太多了。

然后你加载了一个不存在的脚本marisspillanewines.com/dev/scripts/jquery.path.js

动画循环效果很好 - 请参阅jsfiddle.net/creativecouple/WNHTK