jQuery를 사용하여 백그라운드 위치를 어떻게 애니메이트합니까?

div에서 배경 위치 이동을 애니메이션으로 적용하려고했습니다. 사업부는 배경을 가지고 있으며,이 같은 있습니다jQuery를 사용하여 백그라운드 위치를 어떻게 애니메이트합니까?

<div class="uppermenu" style="background-position: 0px -80px;"></div>

그래서, 잘 작동하고, 나는 mouseenter을하고 때 나는 그것이 배경 위치처럼 만드는 애니메이션 배경 위치를 변경하려면를 : 0 픽셀 0 픽셀 ,하지만 그냥 작동하지 않습니다 ... 나는 색상과 모두를 변경할 수 있지만, 배경을 이동할 수 없습니다. 그것을 할 수있는 방법이 있습니까?

나는이 같은 시도했다 :이 같은

jQuery(this).children(".uppermenu").animate({"background-position": "0 85px"}, "slow");

또한이 : 그

jQuery(this).children(".uppermenu").animate({ 
    'background-position-y': '45px', 
    'background-position-x': '0px' 
}, 100, 'linear');

없음 내 위치를 변경하지 않습니다. 뭐가 잘못 되었 니?

출처

2012-03-05 jpganz18

에서 이것에 대한 플러그인을 사용할 수 있습니다' $ ('. uppermenu'). animate'? – shanabus

왜냐하면 부모 요소 위에 마우스를 만들었 기 때문입니다 ... 그래서 아이들 요소에 애니메이션을 만들 필요가 있습니다 ... – jpganz18

배경 위치를 애니메이션의 구문은 다음과 같습니다

.animate({backgroundPosition:"(-20px 94px)"});

또한 왜 당신이 DOM의 자식 개체에 애니메이션을 부착하는 대신에 단지 사용 http://archive.plugins.jquery.com/project/backgroundPosition-Effect

출처

2012-03-05 19:55:15

고마워요, 필자도 그런 식으로 시도했는데 여전히 작동하지 않습니다. Im은 플러그인을 검사 할 것입니다. – jpganz18

jQuery는 x와 y 속성을 동시에 움직일 수 없기 때문에 플러그인을 사용해야합니다. 여기 [더 좋은 설명] (http://snook.ca/archives/javascript/jquery-bg-image-animations)이 있습니다. –

좋은 예입니다 ... 감사합니다. – jpganz18

jQuery를 사용하여 백그라운드 위치를 어떻게 애니메이트합니까?

답변

관련 문제