jQuery轉換動畫不能正確執行for循環

我正在使用jQuery Transit動畫變化的元素。jQuery轉換動畫不能正確執行for循環

我使用for循環動畫多個框。

的JavaScript：

<script> 
window.onload = function(){ 
    $('div.test').mouseover(function(){ 
    for (var i = 0; i < 2; i++){ 
     console.log(i+' Starting Loop'); 

     //Rotate box animation 
     $('div.test' && '.'+i).transition({ 
     perspective: '100px', 
     rotateY: '-180deg', 
     x: '-90px' 
     }, 'slow',function(){ 
     //On completion code. 
     $('div.test' && '.'+i).append(' With Changed Text'); 
     console.log(i + 'Text has been changed'); 

     //Rotate back 
     $('div.test' && '.'+i).transition({ 
      perspective: '100px', 
      rotateY: '0deg', 
      x: '0px' 
     }, 'slow'); 
     }); 
     console.log(i + 'finished the loop'); 
     alert(i + ' finished loop'); 
    } 
    }); 
} 
</script>

和HTML：

<body> 
<div class='test 0'> 
    Box1 
</div> 
<div class='test 1'> 
    Box2 
</div> 
</body>

它應該通過使框移動到工作，進行適當的修改，然後再移回原來的位置。

但是，在繼續執行for循環的下一次迭代之前，不是等待第一個動畫完成，它似乎在等待for循環完成，然後纔會執行$.transition()函數。

所以當調用$.transition()函數時，i = 2。因此，$.append()函數將附加到類「.2」的元素，該元素不存在。

有什麼方法可以確保動畫在循環內正確執行嗎？

注意這是我的真實代碼的簡化版本。我通常會爲每個盒子附加不同的值。我也遍歷可能超過2的列表。

編輯我找到了一個通過遞歸迭代遍歷數組的解決方案。 Here it is.

來源

2012-07-27 KStensland

循環是非阻塞的。遞歸的時間！ – 2012-07-27 20:30:13

就這樣，這有一個正式的答案，這裏是我的新的javaScript代碼。

<script> 
function rotateBox(list){ 
    if (list.length <= 0){ 
    return; 
    } 

    var i = list.pop(); 
    console.log("i: "+i); 

    $('div.test' && '.'+i).transition({ 
    perspective: '100px', 
    rotateY: '-180deg', 
    x: '-90px' 
    }, 'slow',function(){ 
    //On completion code. 
    $('div.test' && '.'+i).append(' With Changed Text'); 
    console.log(i + 'Text has been changed'); 

    //Rotate back 
    $('div.test' && '.'+i).transition({ 
     perspective: '100px', 
     rotateY: '0deg', 
     x: '0px' 
    }, 'slow', function(){ 

     //Recursion! 
     rotateBox(list); 
    }); 
    }); 

} 

window.onload = function(){ 

    //a list of arbitrary values that match with a <div> class 
    list = [0, 1]; 

    $('div.test').mouseover(function(){ 
    rotateBox(list); 

    //Just in case you feel like running through it again 
    list = [0, 1]; 
    }); 
}; 
</script>

並演示：http://jsfiddle.net/bHsL3/6/。

來源

2012-07-28 16:58:56 KStensland

我認爲你已經有了必要的代碼來使盒子來回動畫，但是，你的for循環正在立即執行（從而在幾乎同時觸發轉換）。

看看這個例子。您應該可以修改它以根據需要循環多次。 http://jsfiddle.net/zca33/

而且，我不能肯定，您可以用& &結合jQuery選擇，至少，它不是首選的方法。請參閱：http://api.jquery.com/multiple-selector/

編輯：由於您試圖在ajax調用成功時執行動畫，因此您可以通過CSS類定位特定框。請參閱： http://jsfiddle.net/zca33/2/

來源

2012-07-27 18:47:58

這將工作，如果我實際上使用鼠標懸停。在這個例子中，mouseover只是一個任意的觸發器。在真實的代碼中，動畫需要通過ajax請求的成功來觸發。該請求返回一個包含列表的json對象，該列表告訴函數哪些方框需要更改以及要更改哪些方框。所有旋轉的盒子都需要一起旋轉或按順序旋轉，由用戶自發旋轉。 – KStensland 2012-07-27 18:57:25

我想我遵循你所說的話。因此，您執行ajax請求，並在完成時爲相應的框設置動畫。我假設你想通過在ajax響應中返回的某個整數來定位框來執行此操作？ – 2012-07-27 19:01:00

這將是正確的。因此，以整數命名的類。 – KStensland 2012-07-27 19:03:00

jQuery轉換動畫不能正確執行for循環

回答

相關問題