jQuery 1.6 : backgroundPosition vs backgroundPositionX 및 FF4 호환성

Question

'iCheckbox'(http://stackoverflow.com/questions/6032538/) jQuery 플러그인을 jQuery 1.4.4 이상에서 작동 시키려고 시도한 결과, 하나 개의 파라미터는 표기로

animate({backgroundPosition:'10px 0px'}) 

필요로

animate({backgroundPositionX: '10px', backgroundPositionY: '0px'}) 

로만 특성으로 변경된다. 지금까지는 말이 되긴했지만 Safari와 Chrome에서 정상적으로 작동하는 동안 FF4 (Mac의 경우 모두)에서 작동하지 않습니다 ..

그래서 내가 변경하려고하면 마침내 알아 냈습니다. 그것 to

animate({backgroundPosition: '10px'}) 

그것은 도처에 일한다! 하지만 여기서 무슨 일이 일어나고있는거야? 이제는 하나의 매개 변수를 지정 했으므로 작동하지만 X 축 또는 Y 축의 경우 지정하지 않습니다 (기본 X 축의 기본 설정이므로 Y 축에서 작동하게하려면 어떻게해야합니까?)

이것은 이상하게 보입니다. 여기 내 해결책은 올바른 방법 일 수 없습니다 .. 조언이 필요합니다.

무슨 일 이죠?

jQuery 1.4 - 1.6을 사용하여 백그라운드 위치를 애니메이션으로 표현하여 브라우저에서 작동되도록하려면 어떻게해야합니까? 에 따르면

Answer 1

는, JQuery와는 두 값을 애니메이션 할 수 없습니다 같은 시간에 따라서 backgroundPosition에 대한 두 개의 값을 입력해도 전혀 작동하지 않습니다. 또한 px 값의 경우 JQuery documentation은 이 아니고이 아니고 px으로 작성하십시오.

둘째, backgroundPositionX 및 backgroundPositionY는 몇 브라우저, 특히 IE와 당신이 FF 또는 오페라에서 작동하지 않는 것을 발견 할 이유는 최근 웹킷, 지원표준이 아닌 CSS 속성이 있습니다. (See here)

JQuery의 animate과 CSS 전환을 혼합하면 대부분의 브라우저에서 한 축의 배경 이미지가 애니메이션으로 작동한다는 것을 알게되었습니다. 나는 또 다른 질문 (jQuery.animate background-position)에 내 대답을 인용합니다 :

사용 jQuery의 .animate() 및 backgroundPositionX와 IE를위한 별도 Y (이 최신 JQuery와 함께 작동합니다). 그런 다음 support CSS transitions (IE 이외의 거의 모든 것) 브라우저에서 .animate() 대신 .css()을 사용하여 배경 위치를 변경하고 스타일 시트에서 CSS 전환을 설정하십시오.

위의 내용을 대부분의 브라우저에서 처리 할 수 ​​있지만 플러그인을 사용하는 것만 큼 AS 과 호환되지 않을 수 있습니다.여기서 직장에서 보시길 바랍니다 : http://jsfiddle.net/lucylou/dVpjh/

Answer 2

: http://www.w3schools.com/css/pr_background-position.asp

". 당신은 하나 개의 값을 지정하면 다른 값이 50 % 될 것입니다 당신은 혼합 할 수 있습니다 %와 위치"첫째