2011-07-28 3 views
4

jQuery animate를 사용하여 웹 페이지의 항목을 슬라이드합니다. 웬일인지 웹킷 브라우저에서만 요소가 움직이는 공간 전체에 인공물 흔적이 있습니다. 이 일을 막거나 숨길 수있는 방법이 있습니까? 그들은 당신이 여기 페이지를로드 한 번 회전 목마에 볼 수 있습니다jQuery 애니메이션을 사용할 때 웹킷 브라우저에 나타나는 아티팩트를 숨기는 방법이 있습니까?

: 여기에이 시스템에서 http://www.mywebclass.org/~jeff/

답변

4

를 사용해야합니다 백업의 1 x 1 픽셀 다음 아래로 스크롤 :

$(this).addClass('active'); 
scrollTo(document.body.scrollLeft, document.body.scrollTop + 1); 
scrollTo(document.body.scrollLeft, document.body.scrollTop - 1); 
+0

가장 쉬운 방법입니다. 감사! – chromedude

1

, 나는 어떤 흔적을 볼 수 없습니다,하지만 난 당신에 대해 얘기 효과를 알고있다.

직접 해결책은 아니지만 느린 시스템에서는 왼쪽 속성의 애니메이션 효과가 매우 리소스가 많이 소모됩니다. overflow:hidden;이 설정된 <div>과 더 큰 슬라이드 하나를 사용하면 이러한 애니메이션 대신 scrollLeft()을 애니메이션으로 지정하여 움직이면 전체적으로보다 부드러운 경험을 얻을 수 있습니다.

디자이너에 대한 jQuery에 대한 게시물이 있습니다. 일단 발견하면 업데이트 할 것입니다.

업데이트 : "jQuery for Designers - Fun with Overflows"

+0

아 ... 아주 흥미로운 아이디어. 나는 그것을 조사해야 할 것이다. – chromedude

1

난 단지 내가 아닌 표준 글꼴을 사용하여 발생 생각 H1에서 애니메이션의 먹다 남은 음식을 참조하십시오.

해결책은 아니지만 그것을 막을 수 없다면 웹 페이지를 1 픽셀 위나 아래로 스크롤하여 그 작은 놈을 제거 할 수 있습니다.

jQuery (1.6.2 대신 1.3)의 오래된 버전을 사용하고 있습니다. 이유가 있습니까? 그렇지 않다면, 당신은 당신의 애니메이션 콜백에서 최신 버전

+0

jquery 버전에 대한 좋은 지적. 우리가 1.3을 가지고있는 이유를 모른다. – chromedude

1

트레일 애니메이션 @ 글꼴 얼굴 텍스트의 왼쪽에 왼쪽 속성을 사용하여 Chrome & Safari. 텍스트에 왼쪽 패딩을 사용하고 조정할 애니메이션을 조정하면 문제가 해결된다는 것을 알았습니다.