jquery 애니메이션 사이에 짧은 지연이 있습니다. 왜?

Question

$("#car_overtake5").animate({path : new $.path.arc(arc_params)}, {duration: 2000, queue: false}); 
$("#car_overtake5").animate({rotate: '109deg'}, {duration: 2000, queue: true}); 
$("#car_overtake5").animate({"left":"9872px","top":"4872px"}, {duration: 1000, queue: true}); 
$("#car_overtake5").animate({rotate: '94deg'}, {duration: 250, queue: true}); 
$("#car_overtake5").animate({"left":"10939px","top":"4948px"}, {duration: 1000, queue: true}); 

자동차가 경마장 주변에서 움직이고 있습니다. 그러나 각 애니메이션이 끝나면 짧은 시간 동안 정지 한 후 다음 애니메이션을 재생합니다.

어떻게 지체없이 유창하게 플레이 할 수 있습니까?

편집 : 이징을 선형으로 변경 했으므로 지연이 없습니다.

Answer 1

기본 완화가 "스윙"로 설정되어 있으므로가 "선형"변경 시도 :이 옵션을 사용

$("#car_overtake5") 
    .animate({path : new $.path.arc(arc_params)}, {duration: 2000, queue: false, easing: "linear"}) 
    .animate({rotate: '109deg'}, {duration: 2000, queue: true, easing: "linear"}) 
    .animate({"left":"9872px","top":"4872px"}, {duration: 1000, queue: true, easing: "linear"}) 
    .animate({rotate: '94deg'}, {duration: 250, queue: true, easing: "linear"}) 
    .animate({"left":"10939px","top":"4948px"}, {duration: 1000, queue: true, easing: "linear"}); 

Answer 2

jQuery는 매번 DOM에서 #car_overtake5을 조회해야합니다. 이로 인해 지연이 발생합니다. 특히 "대규모 프로젝트"에서 말한 것처럼 말입니다.

$("#car_overtake5").animate({path : new $.path.arc(arc_params)}, {duration: 2000, queue: false}) 
     .animate({rotate: '109deg'}, {duration: 2000, queue: true}) 
     .animate({"left":"9872px","top":"4872px"}, {duration: 1000, queue: true}) 
     .animate({rotate: '94deg'}, {duration: 250, queue: true}) 
     .animate({"left":"10939px","top":"4948px"}, {duration: 1000, queue: true});