jQuery 애니메이션 + 배경 이미지 스왑

Question

jQuery로 몸무게를 높이려고 노력 중이며 문제가 생겨서 저에게 곤란을 겪었습니다.

기본적으로 화면의 왼쪽에서 오른쪽으로 움직이는 트럭을 얻으려고하고 있는데, 화면의 오른쪽으로 가면 트럭의 배경 이미지가 트럭은 다른 방향으로 향하게되고 화면을 가로 질러 다시 움직이며 영원히 반복됩니다.

나는 트럭을 화면을 가로 질러 움직일 수 있고, 배경 이미지를 바꿀 수 있지만 어떤 종류의 논리적 인 순서로 일어날 수는 없다. 트럭 배경 이미지가 왼쪽에서 오른쪽으로 완료 될 때가 아니라 페이지로드시 스왑됩니다. 여기

지금까지 코드입니다, 나는 문법은 아마 잘못 실현, 그러나 희망 당신은 내가 뭘하려고 오전 표시됩니다

$(document).ready(function() { 

    $(".animationWrap").animate({ left: "845px" }, { duration: 9000, queue: true }){ 
    $(".animationWrap").css('background', 'transparent url(/Resources/Images/clearence/truckLeft.png) no-repeat 0 0'); 
} 

}); 

Answer 1

사용 콜백 함수를 처음 .animate에있는 그것은이 완료 화재 후, (jQuery Animate의 구문 참조)를 위해 일을합니다 :

$(document).ready(function() { 

    $(".animationWrap").animate({ left: "845px" }, 9000, function() { 
     css('background', 'transparent url(/Resources/Images/clearence/truckLeft.png) no-repeat 0 0'); 
     animate({ left: 0 }, 9000); 
    }); 
}); 

Answer 2

당신은 콜백 사용할 필요가 - 애니메이션이 완료되면 트리거됩니다. 때로는이를 이것을 명명 된 함수로 생성하여 재사용하는 것이 도움이됩니다.

$(document).ready(function() { 
    $('.animationWrap');.animate({ left: "845px" }, { duration: 9000, queue: true }, animationComplete); 
}); 

function animationComplete(){ 
    $(this).css('background', 'transparent url(/Resources/Images/clearence/truckLeft.png) no-repeat 0 0'); 
} 

Answer 3

이것이 내가 작동하게 한 것입니다. 나는 또한 jQuery 타이머라고 불리는 플러그인을 사용하여 애니메이션을 무한히 반복하도록했다. 여러분 모두를 도와 주셔서 감사합니다.

$(document).ready(function() { 
     $(".animationWrap").everyTime(0, function() { 

      $(".animationWrap").animate({ left: "845px" }, 35000, function() { 
      $(this).css('background', 'transparent url(/Resources/Images/clearence/truckLeft.png) no-repeat 0 0'); 
     }); 
     $(".animationWrap").animate({ left: "-1px" }, 35000, function() { 
      $(this).css('background', 'transparent url(/Resources/Images/clearence/truckRight.png) no-repeat 0 0'); 
     });  

    }); 

});