jQuery 无尽- animation

Question

我正在研究无尽的 jquery animation，它绘制 6 个 div 并逐个交换它们的持久性。 （最好看一下链接）div的位置保存在一个数组中，每个循环，它的元素交换一个position。 animation 已经准备好并且可以解决，我遇到的问题是，我真的不知道如何在无限循环中调用它。

这是要使用的代码。

这是 animation 全屏查看。

感谢您的帮助；

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

Answer 1

animate() function 有一个完整的参数，即在 animation 完成后调用的 function。 猜猜你可以在完整的参数中传递你的动画 function 以便它在完成每次迭代时不断调用自己？

http://api.jquery.com/animate/

Answer 2

好的，我用下面代码的 jquery-timers 演示找到了一个干净的解决方案

$(文档).ready(函数(){

      $("#ball_holder").everyTime(3000, function(){                      
         $("#ball_holder").animate({top:"184px"}, 400).animate({top:"0px"}, 370);   
      });

这里的 3000 是以毫秒为单位的 function 的间隔。希望这有帮助