jquery動畫回調不執行，直到最終循環

Question

我做了一個小測試代碼使用jquery公交插件的動畫。

該腳本的目的是讓一個塔樓的照片向用戶翻轉90度，切換到另一個塔樓圖像，並翻轉另一個90度以平放在屏幕上。問題是，在第一次90度翻轉後，圖像完全消失，直到for循環結束之後才做最後一次翻轉作爲第二個圖像。我期待它不斷翻轉，直到循環結束。

我想這已經是與封閉和範圍......

的Javascript：

$(function() { 
for (var i = 0; i < 10; i++) { 
    $('#test_flip') 
    .css('background-image', 'url("tower1.jpg")') 
    .transition({ 
    rotateY: '90deg' 
    }, function() { 
    $('#test_flip') 
    .css('background-image', 'url("tower2.jpg")') 
    .transition({ 
     rotateY: '180deg' 
    }); 
    }); 
}; 
}); 

的jsfiddle：http://jsfiddle.net/ce9b9aja/

Answer 1

問題在於這樣一個事實，for循環調用.transition連續10次。 jQuery隊列中的調用是queued（這是通過transit.js在幕後完成的），但它們是而不是按您期望的順序排隊。

採取下面的例子：

$(function() { 
 
    $('#test').transition({x:40}, function() { 
 
     $(this).transition({y:40}); 
 
    }) 
 
    
 
    $('#test').transition({scale:0.5}, function() { 
 
     $(this).transition({skewX:"50deg"}); 
 
    }); 
 
});

#test { 
 
    width: 10em; 
 
    height: 10em; 
 
    background-color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script> 
 
<div id="test"></div>

在這個例子中，第一過渡x:40將被立即因爲沒有隊列執行。儘管它是即時執行的，因爲它是一個動畫，所以它將使用某種形式的setTimeout或setInterval和將不會在transition方法調用中完成。因此，將調用scale:0.5轉換，而x:40轉換仍在進行動畫處理，這會在y:40放入隊列之前將其放入隊列中。

因此，隊列順序是

x:40 -> scale:0.5 -> y:40 -> skewX:50deg 

同樣的，你的代碼產生以下隊列：

rotateY:90deg -> ... -> rotateY:90deg -> rotateY:180deg -> ... -> rotateY:180deg 

因此你的代碼的行爲。它首先旋轉圖像90deg，然後它再做9次，這不會在視覺上改變任何東西（因此「暫停」）。然後它改變圖像並旋轉它180deg並且再做9次。

一個解決方案可能是使用.transition函數的回調來創建遞歸函數。

$(function() { 
    FlipMe($('#test_flip'), "http://i.imgur.com/tYYtwbi.jpg", "http://i.imgur.com/G4CvJpc.jpg", 10) 
}); 

function FlipMe($el, image1, image2, times) { 
    $el.css('background-image', 'url("'+image1+'")') 
     .transition({rotateY: '90deg'}, function() { 
       $el.css('background-image', 'url("'+image2+'")') 
       .transition({rotateY: '180deg'}, function() { 
        if(times > 0) { 
         FlipMe($el, image2, image1, times - 1); 
        } 
       }); 
    }); 
} 

更新小提琴這裏：http://jsfiddle.net/ce9b9aja/1/

上面的代碼只使用回調函數來決定事件的順序的例子如下實施。當第一次轉換完成時，回調函數將「排隊」下一個轉換，由於沒有其他任何東西在隊列中，所以將立即執行。等等。