2

画像、その位置、および寸法に対して jquery アニメーションを実行しようとしています。私がやろうとしているのは、クリックした画像を最大画像の位置(位置1、p1、画像)に移動することです。

これまでにできたことは、すべての画像を次の前方位置に回転させることです。

このfiddleで確認できます。

私がやろうとしたことは、movementそのようにループ内に関数を配置することです

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

最初は、すべての要素が 3 ポジション前に移動すると思っていましたが、そうではありませんでした。目立ったものは何も起こりませんでした。注意:checkerクリックされた画像の ID 番号です。

またmovement、要素の数（16）を超えて関数を実行すると、問題がある程度解決されると考えました。各要素が 2 つの位置を移動することを期待して、32 に変更します。

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 に答える