Question

我使用jquery transit插件为动画制作了一个小测试代码。

剧本的目的是让塔的照片向用户翻转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循环连续10次调用.transition。 jQuery队列中的调用是queued（由transit.js在幕后完成），但它们不按照您期望的顺序排队。

采用以下示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在此示例中，第一个转换x:40将立即执行，因为没有队列。尽管它是立即执行的，但由于它是一个动画，它将使用某种形式的setTimeout或setInterval而将在{{1}中完成方法调用。因此，在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，然后再旋转9次，这不会在视觉上改变任何东西（因此＆＃34;暂停＆＃34;）。然后它会改变图像并将其旋转90deg并再进行9次。

一种解决方案可能是使用180deg函数的回调创建递归函数。下面是一个例子：

.transition

此处更新了小提琴：http://jsfiddle.net/ce9b9aja/1/

上面的代码专门使用回调函数来指示事件的顺序。第一次转换完成后，回调函数将排队＆＃34;队列＆＃34;下一个转换，将立即执行，因为队列中没有其他内容。等等。

jquery动画回调直到最后循环才执行

1 个答案: