延迟的Jquery排队动画序列；需要重复
延迟的Jquery排队动画序列；需要重复
提问于 2012-10-03 23:36:23
我需要下面的代码，它动画图像序列，运行，然后无限重复。目前它在页面加载，然后就结束了。观看动画的url是：http://marisspillanewines.com/dev/
谢谢!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 });
});回答 1
Stack Overflow用户
发布于 2012-10-04 07:16:49
对于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()使用了简短的语法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12718366
复制相关文章
相似问题
腾讯云开发者
