Home/ Questions/Q 6150693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T19:39:12+00:00

i am working on a endless jquery animation, which draws 6 divs and swaps

  • 0

i am working on a endless jquery animation, which draws 6 divs and swaps them persition by persition. (better you take a look at the link)
The positions of the divs are held in an array and each cycle, its elements are swaped a position.
The animation is ready and works out, the problem I am having is, that I dont really know how to call it in a endless loop.

Here is the code to work with.

Here is the animation to view in fullscreen.

thx for any help;

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The animate() function has a complete parameter, which is A function to call once the animation is complete. Guess you can just pass your anim function in the complete param so that it continuously calls itself as it finishes each iteration?

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

    • 0