javascript - 动画不适用于外循环

Question

我正在尝试对图像、它们的位置和尺寸执行一些 jquery 动画。我想要做的是将点击的图像移动到最大图像的位置(位置 1，p1，图像)。

到目前为止，我能做的是将每张图片旋转到下一个向前的位置。

你可以在这个fiddle中看到.

我试图做的是将函数 movement 放在一个循环中，就像这样

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

起初我以为它只是将每个元素向前移动 3 个位置，但事实并非如此。没有什么值得注意的事情发生。注意:checker是被点击图片的id号。

我还认为，使 movement 函数继续进行的次数超过元素的数量 (16) 也会导致它在某种程度上解决问题。我将其更改为 32，期望每个元素移动 2 个位置。

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++;

} 

我现在不知所措。理想情况下，我想做的是将其放入一个循环中，该循环的参数为“继续直到检查器左侧和顶部位置 == p1(初始)的左侧和顶部位置”。

所以我的问题是让元素在点击时移动多个位置。我不确定我是否在这方面采取了正确的方法，但我们将不胜感激。

提前致谢。

Answer 1

//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++;

    }
}