我正在制作一个无尽的jquery动画,它绘制6个div并逐个位置交换它们。 (最好看看链接) div 的位置保存在一个数组中,每次循环,其元素都会交换一个位置。 动画已准备就绪并可以正常运行,我遇到的问题是,我真的不知道如何在无限循环中调用它。
Here是要使用的代码。
Here是要全屏查看的动画。
感谢您的帮助;
HTML:
<head> </head>
<body>
<style>
div { background-color: #3f3; }
</style>
<div style="position:absolute" class="block-flex-4" id="block-video-4">
ELEMENT1
</div>
<div style="position:absolute" class="block-flex-5 block-flex" id="block-video-5">
ELEMENT2
</div>
<div style="position:absolute" class="block-flex-6 block-flex" id="block-video-6">
ELEMENT3
</div>
<div style="position:absolute" class="block-flex-3 block-flex" id="block-video-3">
ELEMENT4
</div>
<div style="position:absolute" class="block-flex-2 block-flex" id="block-video-2">
ELEMENT5
</div>
<div style="position:absolute" class="block-flex-1 block-flex" id="block-video-1">
ELEMENT6
</div>
</body>
JS:
try{
var arrayFlexRotation = new Array(
[110, 93, 38, 119, 1],
[177, 153, 172, 190, 1],
[83, 70, 412, 217, 0.35],
[194, 168, 201, 0, 1],
[167, 145, 424, 10, 1],
[141, 123, 553, 175, 0.8]
);
var doAnim = function(elt, eltWidth, eltHeight, eltLeft, eltTop, eltFontSize){
jQuery(elt).wait().animate({
width: eltWidth + "px",
height: eltHeight + "px",
left: eltLeft + "px",
top: eltTop + "px",
fontSize: eltFontSize + "em"
}, 5000,null,null);
}
jQuery.fn.wait = function(time, type) {
time = time || 500;
type = type || "fx";
return this.queue(type, function() {
var self = this;
setTimeout(function() {
$(self).dequeue();
}, time);
});
};
function runit(){
var temp = arrayFlexRotation[0];
arrayFlexRotation[0] = arrayFlexRotation[1];
arrayFlexRotation[1] = arrayFlexRotation[2];
arrayFlexRotation[2] = arrayFlexRotation[5];
arrayFlexRotation[5] = arrayFlexRotation[4];
arrayFlexRotation[4] = arrayFlexRotation[3];
arrayFlexRotation[3] = temp;
//animate position
for(i=0; i<6; i++)
{
doAnim(jQuery("#block-video-" + (i+1)), arrayFlexRotation[i][0], arrayFlexRotation[i][3], arrayFlexRotation[i][2], arrayFlexRotation[i][3], arrayFlexRotation[i][4]);
}
}
runit();
runit();
runit();
//and so on
}
catch(e)
{
alert(e);
}
最佳答案
animate() 函数有一个完整的参数,这是动画完成后调用的函数。我猜你可以在完整的参数中传递你的 anim 函数,以便它不断地调用自己当它完成每次迭代时?
关于javascript - jQuery 无尽-动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6745527/