Я работаю над бесконечной анимацией jquery, которая рисует 6 делений и меняет их постоянство на постоянное. (лучше вы посмотрите на ссылку)
Позиции div хранятся в массиве, и каждый цикл, его элементы меняются местами.
Анимация готова и работает, проблема в том, что я не знаю, как ее вызвать в бесконечном цикле.
Здесь - код для работы.
Здесь - анимация для просмотра в полноэкранном режиме.
спасибо за любую помощь;
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);
}