動畫不能使用外部循環

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

    } 
}