CODEWITHSUNDEEP
javascriptjqueryanimation
dilbert
dilbert

Reputation: 127

jQuery endless- animation

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

Upvotes: 0

Views: 2256

Answers (2)

maniacneron
maniacneron

Reputation: 424

ok i found a clean solution with jquery-timersdemo of the code below

$(document).ready(function(){

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

here the 3000 is the interval of the function in miliseconds.Hope this helps

Upvotes: 1

Steve Claridge
Steve Claridge

Reputation: 11080

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/

Upvotes: 1

Related Questions