jQuery 배경 및 요소 애니메이션 동기화

다음 피들에서 내 문제를 설명했습니다. http://jsfiddle.net/6CTMs/jQuery 배경 및 요소 애니메이션 동기화

wrapper의 배경은 중간에 흰색 구멍이있는 이미지입니다. 이 구멍은 block 요소로 덮여 있습니다.

이제 배경과 움직이는 블록을 움직이게하고 싶습니다. 배경 위치 애니메이션 (포함 된 배경 위치 애니메이션 플러그인을 통해)과 block 요소의 top 속성을 동시에 애니메이트하고 있습니다.

그러나 적어도 Win7의 Chrome 21.0.1180.79에서는이 두 애니메이션이 완전히 동기화되지 않습니다. 애니메이션의 모든 프레임마다 보이고 흰색 밴드 (하단의 구멍이 1 픽셀 높은 슬라이스를 보여줍니다)가 맨 아래에 표시되고 다른 모든 프레임은 보이지 않습니다.

어떻게 이것을 피할 수 있습니까?

하위 요소에 배경 이미지를 포함하고 그 상위 속성 만 애니메이션하는 경우에는 옵션이 아닙니다. 또한 요소를 한 픽셀 높이거나 '해킹'처럼 만들 수 없습니다. 치수 및 애니메이션은 정확해야합니다.

사이드 노트로, 나는이 문제가 아마도 완전히 해결되지 않은 an earlier question of mine과 관련이있을 것이라고 생각합니다.

편집 : 나는 여기에서 피들을 갈래 썼다. http://jsfiddle.net/3r26H/1/ 작동하는 것처럼 보이지만 애니메이션이 끝날 때 한 픽셀이 사라지는 것처럼 보입니다. Webkit이 아닌 다른 브라우저에서도 새로운 문제가 발생하는지 여부는 알 수 없습니다. 이 해결책은 얼마나 정결입니까?

출처

2012-08-26 Emphram Stavanger

** Firefox 14.0.1 **에서 테스트 할 때 완벽하게 동기화됩니다. – Chris

감사 Abody97! 어쩌면 이것이 Webkit만의 문제일까요? 흥미로운 –

이 스레드에 따르면 : JQuery synchronous animation JQuery에서 두 개의 애니메이션을 동기화하는 것은 불가능합니다. 여러분이 할 수있는 일은 requestAnimationFrame을 사용하고 각 프레임에서 올바른 계산을하여 두 요소가 동기화되도록 모든 것을 "손으로"움직이게하는 것입니다.

출처

2012-08-26 16:39:04 bperson

나는이 논리와 단계 함수를 사용하여이 피들이를 내가 링크 된 질문에 대한 답에서 만들 수 있었다. 그리고 일단 완료되면 애니메이션이 1 픽셀 씩 사라지는 것을 제외하고는 내 크롬에서 작동하는 것으로 보인다. http://jsfiddle.net/3r26H/1/ - 크로스 브라우저에서이 효과를 신뢰할 수있는 방법에 대한 아이디어가 있습니까? –

그것은 나를 위해 작동하지 않는 것 같습니다 :/(Mac OS X Lion - Chrome & Firefox). 그래서 귀하의 질문에 나는 그것이 신뢰할 수 없다고 말할 것입니다 :) 나는 내가 어떻게했을지를 보여주기 위해 또 다른 바이올린에서 일하고있다. (그리고 내가 처음에 정말로 좋은 해결책이라고 생각한다면 : D) – bperson

그래서 내가 여기있다. 함께 왔어요 : http://jsfiddle.net/eM8TX/23/ – bperson

jQuery 배경 및 요소 애니메이션 동기화

답변

관련 문제