L'animation ne fonctionne pas avec la boucle externe

Question

J'essaie d'exécuter une animation jquery sur des images, leurs positions et leurs dimensions. Ce que j'essaie de faire est de déplacer l'image cliquée à la position de la plus grande Image(Position 1,p1, image).

Ce que j'ai réussi à faire jusqu'à présent, c'est faire pivoter chaque image vers la prochaine position avant.

Vous pouvez voir dans ce violon .

Ce que j'ai essayé de faire, c'est de placer la fonction movement dans une boucle comme ceci

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

Au début, je m'attendais à ce qu'il déplace chaque élément de 3 positions en avant, mais ce n'était pas le cas. Il ne s'est rien passé de notable. NB : checker est le numéro d'identification de l'image cliquée.

J'ai aussi pensé que faire le movement se poursuivent au-delà du nombre d'éléments (16), ce qui résoudrait quelque peu le problème. Je l'ai changé pour 32 en m'attendant à ce que chaque élément se déplace de 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++;

} 

Je ne sais plus quoi faire. Idéalement, ce que je veux faire est de le mettre dans une boucle qui aurait les paramètres "continuer jusqu'à ce que les positions gauche et supérieure du contrôleur == positions gauche et supérieure de p1(initial)".

Mon problème est donc de faire en sorte que les éléments se déplacent de plus d'une position au moment du clic. Je ne suis pas sûr d'adopter la bonne approche, mais toute aide serait appréciée.

Merci d'avance.

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

    }
}