javascript - jQuery 无尽-动画

标签 javascript jquery animation

我正在制作一个无尽的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 函数,以便它不断地调用自己当它完成每次迭代时?

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

关于javascript - jQuery 无尽-动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6745527/

相关文章:

android - 键盘打开时动 Canvas 局调整大小

javascript - 向数据表中的行或字段添加 href 超链接

Jquery 表格排序器不工作。它是否符合 HTML5 标准?

javascript - jquery .html() 注入(inject)对象与包含对象的变量

javascript - 使用 JavaScript 将图像从 A 移动到 B

CSS3 背景(URL 图像)在其他动画运行时设置动画

javascript - Angular 平移函数被无限调用

javascript - 在 Ajax php 和 mysql 中读取响应

javascript - 当它们属于同一个模块时,如何将 nestjs 服务注入(inject)另一个服务?

javascript - 在 jquery 中传递事件对象