問題在於這樣一個事實,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/
上面的代碼只使用回調函數來決定事件的順序的例子如下實施。當第一次轉換完成時,回調函數將「排隊」下一個轉換,由於沒有其他任何東西在隊列中,所以將立即執行。等等。
甜美的男人。這是一個很好的解決方案! – tomc 2014-09-02 23:53:54