애니메이션이 외부 루프와 작동하지 않습니다.

Question

이미지, 위치 및 크기에 대해 일부 jquery 애니메이션을 수행하려고합니다. 내가하려는 일은 클릭 한 이미지를 Biggest Image (Position 1, p1, image)의 위치로 옮기는 것입니다.

지금까지 내가 할 수 있었던 일은 모든 이미지를 다음 전진 위치로 회전시키는 것입니다.

이 부분은 fiddle에서 볼 수 있습니다. 내가 할 시도 무엇

가 나타나서 3 개 위치 앞으로 모든 요소를 ​​이동하지만 그런 경우가 아니었다에 내가 예상 첫번째 생각에 너무

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

같은 루프 내부의 기능 movement을 배치하는 것입니다. 아무것도 눈에 띄지 않게되었습니다. NB : 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++; 

} 

나는 지금 무엇을 해야할지를 놓치고 있습니다. 이상적으로 내가하고 싶은 것은 매개 변수가 "checker 왼쪽 및 위쪽 위치 == 왼쪽 및 위쪽 위치 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++; 

    } 
}