JavaScript/jQuery로 컨텐츠를 슬라이딩하기위한보다 부드러운 애니메이션을 얻으려면 어떻게해야합니까?

Question

여기에 약간의 내용이 있습니다.

http://www.smallsharptools.com/downloads/jQuery/Slider/slider.html

HTML 구조는 간단하다. 고정 된 높이와 너비의 외부 상자가 있으며 오버플로가 숨겨져 있습니다. 그런 다음 Item 클래스로 표시된 일련의 div 요소 인 내용의 전체 너비로 설정된 너비의 내부 컨테이너가 있습니다.

내부 컨테이너를 왼쪽 및 오른쪽으로 밀어 내려면 왼쪽 여백을 변경해야합니다. 왼쪽으로 갈 때 나는 음수가되는 값을 줄이고 다시 오른쪽으로 가면 0으로 되돌립니다. 하지만 나는 더 나은 성능을 기대하는 크롬에서도 들쭉날쭉 한 애니메이션을보고 있습니다.

다른 기술을 사용하여 앞뒤로 움직이면 내 질문이 더 부드럽습니까? 절대 위치가 더 부드럽습니까? 아니면 내가 고려해야 할 다른 것이 있습니까? 내가 아직 모르는 부드러운 애니메이션을 만드는 비밀이 있습니까?

Answer 1

여백은 요소 주위의 다른 요소의 위치에 영향을주기 때문에 여백을 계산하면 다른 요소가 다시 계산됩니다.

절대 위치 지정 (자체 z 인덱스에서)은 여전히 ​​다른 요소의 다시 칠을 발생시킬 수 있지만 주변 요소를 계산할 때 비용이 적게 듭니다.

이 이야기는 내가 "완화"JQuery와 플러그인, documentation here를 사용하여 좋은 결과를 했어 브라우저/DOM 내부가

http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page

Answer 2

를 작동하는 방법에 좋은 통찰력을 제공합니다.

사인, 바운스, 신축성, 가속 등 다양한 부드럽게 움직이는 동작을 HTML 요소에 적용 할 수 있습니다.

그것은 두포에서 언급 한 것과 동일한 기술을 사용하지만, 당신을 위해 지저분한 절대/상대 위치 지정을 처리합니다. 또한 크로스 브라우저이며 새 버전에 최적화되어 있습니다.

그러나 easing을 사용하면 얻을 수있는 장점 중 하나는 프레임 율이 낮은 애니메이션이 더 인상적으로 보이도록 도울 수 있다는 것입니다.