Question

我正在制作一个无休止的jquery动画，它绘制了6个div并通过persition交换它们的persition。（你最好看一下链接） div的位置保持在一个数组中，每个循环，其元素都被转换为一个位置。动画已经准备就绪，我遇到的问题是，我真的不知道如何在无限循环中调用它。

Here是可以使用的代码。

Here是全屏查看的动画。

thx任何帮助;

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（）函数有一个完整的参数，它是一个动画完成后调用的函数。猜猜你可以在完整的参数中传递你的动画函数，这样它就可以连续调用自己因为它完成了每次迭代？

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

Answer 2

好的，我发现了一个使用jquery-timers demo of the code below

的干净解决方案

（文档）$。就绪（函数（）{

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

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

jQuery无尽的动画

2 个答案: