我需要下面的代码来运行,然后无限期地重复图像序列,它为一系列图像设置动画。目前它在页面上加载,然后刚刚完成。观看动画的网址是: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 });
});
对于jQuery中的此类计时问题,有一个插件jQuery-timeing。它将您的代码缩短为以下内容。我建议给图像一个通用的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() 的短语法。