CODEWITHSUNDEEP
javascriptjqueryanimationloops
Fee
Fee

Reputation: 243

Animation not working with outer loop

I am trying to perform some jquery animation on images, their positions and dimensions. What I'm trying to do is move the image clicked to the position of the Biggest Image(Position 1,p1, image).

What I have been able to do so far is rotate every image to the next forward position.

You can see in this fiddle.

What I have tried to do is to place the function movement inside a loop like so

for(var x = 0; x < 3; x++){
    movement(checker);
}

At first thought I expected it to jus move every element 3 positions forward but that wasn't the case. Nothing noticeable happened. NB: checker is id number of the clicked image.

I've also thought that making the movement function go on more than the number of element(16) would also cause it to somewhat solve the problem. I change it to 32 expecting each element to move 2 positions.

function movement(checker){
    var count = 1;
    var first, last, positions, dimensions, leftPos, topPos, imgWidth, imgHeight;
    while(count<=32){//Increasing the loops to 32 from 16
        if(checker == 0){
            checker = 16;
        }

        first = d.e("p"+checker);


        if(checker == 1){
            last = d.e("p"+16);

    }else{
        last = d.e("p"+(checker-1));
    }
    //console.log(checker);
    positions = findPos(last);
    dimensions = getCanvas(last);
    leftPos = positions[0]; topPos = positions[1];
    imgWidth = dimensions[0]; imgHeight = dimensions[1];
    $("#p"+checker).animate({"left":leftPos, "top":topPos, "width":imgWidth, "height":imgHeight}, "fast");
    checker--; count++;

}

I am at a lost of what to do now. Ideally what I want to do is put it in a loop that would have the parameters "continue until checker left and top positions == left and top positions of p1(initial)".

So my problem is getting the elements to move more than one position on the click. I'm not sure if I'm taking the right approach at this but any help would be appreciated.

Thank you in advance.

Upvotes: 2

Views: 108

Answers (1)

jnhwkim
jnhwkim

Reputation: 128

//move object
// current status: index of largest picture
var status = 1;

function movement(checker){
    var count = 1;
    var first, last, positions, dimensions, leftPos, topPos, imgWidth, imgHeight;
    while(count<=16){
        if(checker == 0){
            checker = 16;
        }
        first = d.e("p"+checker);

        if(checker == 1){
            last = d.e("p"+16);

        }else{
            last = d.e("p"+(checker-1));
        }    
        //console.log(checker);
        positions = findPos(last);
        dimensions = getCanvas(last);
        leftPos = positions[0]; topPos = positions[1];
        imgWidth = dimensions[0]; imgHeight = dimensions[1];
        var animateCount = 0;
        $("#p"+checker).animate({"left":leftPos, "top":topPos, "width":imgWidth, "height":imgHeight}, "fast", function() {
            animateCount++;
            // check if all 16 picture's animation was completed.
            if (16 == animateCount) {
                console.log('finished');
                // update the index of largest picture
                status = (status % 16) + 1;
                // rotate all again if status is not equal to checker
                if (status != checker)
                    movement(checker);
            }    
        });
        checker--; count++;

    }
}

Upvotes: 1

Related Questions