jquery排队延迟的动画序列;需要重复

我需要下面的代码来激活一系列图片，然后运行，然后无限期地重复。目前它在页面加载，然后刚刚结束。看动画的网址是：http://marisspillanewines.com/dev/jquery排队延迟的动画序列;需要重复

谢谢！ Mona

$(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 }); 
});

来源

2012-10-03 Mona Reilly

这里是链接：http://marisspillanewines.com/dev/ –

它应该做什么？清理你的问题，所以它只是对问题的描述，而不是你期望它做的事情和源头。我们很乐意提供帮助，只需告诉我们您正在尝试做什么。 –

你目前的做法似乎不可能。尝试抽象动画所需的不同部分，您可能需要创建一个易于使用的jQuery插件。不要硬编码值，动态计算偏移等... – elclanrs

对于jQuery中的这样的计时问题，有一个plugin jQuery-timing。它将您的代码缩短为以下内容。我建议给图像一个常见的CSS类，例如“pic”：

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()。

来源

2012-10-04 07:16:48 peter

非常感谢你。并感谢您的好解释。我已经实现了它，但我必须有错误。你可以看看我的代码，看看我是否做得对吗？ http://marisspillanewines.com/dev/ –

嗨莫娜。我忘了周围块$（function（）{...}）;这使代码在DOM准备好的事件上运行。目前，当不存在“.pic”元素时，它开始循环。 – peter

另一件事：ssrc =“images/maris_CU.jpg” - 在ssrc中有一个“s”太多。 – peter

jquery排队延迟的动画序列;需要重复

回答

相关问题