JQuery 애니메이션 타이밍 작은 문제

Question

좋아, 나는 거의이 일을 마쳤다! 나에게 도움이되었거나 보여준 모든 사람들에게 많은 감사를드립니다. 내가 할 수있는만큼 너를 표결 했어. http://jsfiddle.net/2C8fy/6/

당신은 증가 버튼을 클릭하면, 어떻게 이미지가 왼쪽으로 부드럽게 슬라이드 얻을 수 있습니다 :

이 바이올린을 확인하고 "증가"버튼을 클릭하십시오 - 지금은 하나 개의 마지막 질문이 있습니다 ? 첫 번째 작업은 수행하지만 다른 작업은 진행되지 않습니다. 애니메이션 함수에서 "left : '- = 50px'"를 사용해 보았습니다. 그러나 이것은 이미지 사이의 간격을 엉망으로 만드는 것 같습니다. (여전히 주석 처리되어 있습니다. 보려는 경우 주석 슬래시를 꺼내십시오. 그것은 무엇을 ...).

Answer 1

HTML/CSS 작업 :

는 이미지 컨테이너 #basic_div 절대합니다. 컨테이너 안의 이미지를 다른 div로 감싼 후 .frame 또는 무엇인가로 호출합니다.

컨테이너를 안에 넣고 포장 상자를 position: relative으로 만들고 포장 div를 넣으십시오.

이제 이미지 대신 내부 div에 애니메이션을 적용 할 수 있습니다.

JS : 감소에

는 좌측 프레임 '왼쪽'50 픽셀 속성을 애니메이션화. 애니메이션이 끝나면 첫 번째 이미지를 제거하고 첫 번째 이미지에 더 이상 레이아웃이 없으면 프레임 left 속성을 0으로 다시 설정하십시오. 이것은 점프가 발생하지 않도록합니다.