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/

上面的代码只使用回调函数来决定事件的顺序的例子如下实施。当第一次转换完成时，回调函数将“排队”下一个转换，由于没有其他任何东西在队列中，所以将立即执行。等等。