사용자 정의 컨텐츠 슬라이더에서 미끄럼 중 공백/간격 문제가 발생했습니다.

사용자 정의 컨텐츠 슬라이더를 만들려고합니다. 거의 없지만 스크롤하는 동안 배경이 흰색 인 문제가 있습니다.사용자 정의 컨텐츠 슬라이더에서 미끄럼 중 공백/간격 문제가 발생했습니다.

각 슬라이더 사이에 간격이나 공간이 생깁니다.

나는 슬라이더를 볼 수 있도록 바이올린을 만들었습니다.

<ul id="slider"> 
    <li class="case_study" id="case_study1">Div Slide 1 <div class="right"></div></li> 
    <li class="case_study" id="case_study2">Div Slide 2 <div class="right"></div></li> 
    <li class="case_study" id="case_study3">Div Slide 3 <div class="right"></div></li> 
</ul>

데모 : http://jsfiddle.net/squidraj/6S6KT/2/

전체 화면 : http://jsfiddle.net/squidraj/6S6KT/2/embedded/result/

제안하십시오.

출처

2014-05-24 user3671491

문제는 첫 번째 애니메이션이 끝난 후 두 번째 애니메이션을 적용하는 것입니다. 첫 번째 애니메이션 아래에서 두 번째 애니메이션을 -100 % 이동하면됩니다. –

$('#slider li.case_study:first-child').animate({ 
    left: '-100%' 
}, 300, function() { // The command function is a **CALLBACK** 
    $('#slider li.case_study:first-child').css('left', '100%');

위의 코드는 의도 한대로 수행합니다. 콜백을 사용하는 위치에 주석을 추가했습니다.

첫 번째 항목이 완료되면 콜백이 실행됩니다. 즉, 스크립트가 첫 번째 div를 왼쪽으로 100 % 이동 한 다음 두 번째 div를 화면에 추가하고 왼쪽으로 움직입니다.

당신은 모든 당신의 .animate({},300) 절에 발생 할 - 다음과 같이

먼저 사업부의 오른쪽에 두 번째 사업부를 추가 - 다음 동시에 왼쪽으로 두 div의 이동합니다.

이동 - 새로운 코드를 게시하고 나면 새로운 코드를 게시 할 수 있습니다. 그러나 직접 해결할 수 있는지 알아보십시오. 빨리 배우는 데 도움이됩니다.

출처

2014-05-24 10:43:03

제안 해 주셔서 감사합니다. 지금은 논리를 이해했지만 코드를 구현할 때 엉망이되어 가고 있습니다. 첫 번째 슬라이드를 다른 속도로 이동시킨 다음 두 번째 속도를 다른 속도로 이동시켜 애니메이션 기능을 2 개 유지했습니다. – user3671491

나는 그것을 고쳤다 고 생각한다. – user3671491

http://jsfiddle.net/squidraj/6S6KT/15/ 여전히 공백이 있습니다. – user3671491

사용자 정의 컨텐츠 슬라이더에서 미끄럼 중 공백/간격 문제가 발생했습니다.

답변

관련 문제