2

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

到目前为止，我能够做的是将每个图像旋转到下一个前进位置。

你可以在这个小提琴中看到。

我试图做的是将函数movement放在这样的循环中

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

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

我还认为使movement函数继续运行的次数超过 element(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（初始）的左侧和顶部位置”。

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

先感谢您。

4

1 回答 1

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

    }
}
于 2013-02-21T04:18:02.447 回答