Jquery - 배경에 애니메이션 적용

Question

웹에서 배경 애니메이션 샘플을 검색했습니다. 나는이 URL을 발견

http://jsfiddle.net/rwaldron/TzWQA/

을 그리고 사파리와 크롬을 작동하지만 애니메이션의 배경이 오페라 작업, 그리고 파이어 폭스되지 않습니다. 브라우저에서이 작업을 수행 할 수있는 해결 방법이 있습니까?

에 포함 된 코드는 다음과 같습니다 코드가 실패하는 이유

$(document).ready(function(){ 
$("#puppies") 
    .animate({ 
     backgroundPositionY: "0px", 
     backgroundPositionX: "-250px" 
    }, 2000); 
}); 

Answer 1

backgroundPositionY 및 backgroundPositionX는 FF에서 지원되지 않습니다. 따라서 배경을 애니메이션으로 만들려면 X, Y 값을 모두 배경 위치으로 전달해야합니다.

background-image animation not working in Firefox

는 또한 참조 :

http://www.protofunc.com/scripts/jquery/backgroundPosition/

http://snook.ca/archives/javascript/jquery-bg-image-animations/

여기

는 같은 문제에 대해 토론하다

희망이 도움이됩니다.

Answer 2

@AlphaMale의 설명은 정확합니다.

$(document).ready(function(){ 
    $("#puppies") 
    .animate({ 
     backgroundPosition : "(0 -250px)" 
    }, 2000); 
}); 

가 직접 확인해보기 : 나는 편리한 다음 구문이 작품 크로스 브라우저를 만드는 조각을 사용! http://jsfiddle.net/dUmNN/1/