jquery animate 콜백이 최종 루프까지 실행되지 않음

Question

애니메이션을 위해 jquery transit 플러그인을 사용하여 작은 테스트 코드를 만들었습니다.

스크립트의 목적은 타워의 사진을 사용자쪽으로 90도 돌려서 다른 타워 이미지로 전환하고 다른 90도를 플립하여 화면에 평평하게 놓는 것입니다. 문제는 첫 번째 90도 뒤집기 후 최종 루프가 두 번째 이미지로 나오기 전에 for 루프가 끝날 때까지 이미지가 완전히 사라진다는 것입니다. 루프가 끝날 때까지 계속해서 뒤집기를 원합니다.

나는 ...이 폐쇄 및 범위 함께 할 수있는 뭔가가

자바 스크립트를 상상 :

는

$(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 메서드 호출에서이 완료되지 않습니다. 결과적으로 x:40 트랜지션이 여전히 움직이는 동안 scale:0.5 트랜지션이 호출되어 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/이

위의 코드는 독점적으로 이벤트의 순서를 지시하는 콜백 함수를 사용하는 예는 아래에 구현된다. 첫 번째 전환이 완료되면 콜백 함수는 다음 전환을 "대기"합니다. 다른 전환은 대기열에 없으므로 즉시 실행됩니다. 등등.