현재 페이지가 슬라이드 될 때 이전 페이지를 밀어 넣습니다.

Question

단일 페이지 웹 사이트에서 jquery를 사용하여 사용자가 버튼을 클릭하면 다음 "페이지"를 화면 위로 밀어냅니다. 새 페이지가 오른쪽에서부터 슬라이드 될 때 현재 페이지가 왼쪽으로 미끄러지므로 빈 공간이 표시되지 않지만 현재는 다음 페이지가 슬라이드 될 때 현재 페이지 만 사라질 수 있습니다. . 내가 사용하는 코드는 여기에 있습니다 : http://jsfiddle.net/xoa029jz/5/

function slideToNext() { 
    var currentPage = $('.current-page'); 
    var nextPage = getNextPage(currentPage.attr('id')); 
    $(nextPage).css('display', 'block'); 
    $(currentPage).animate({left: '-100%'}); 
    $(currentPage).removeClass('current-page'); 
    $(nextPage).addClass('current-page'); 
    $(nextPage).animate({left: '0%'});  
} 

Answer 1

귀하의 CSS 전환이 jQuery를 애니메이션으로 싸우고있다. 내가 좋아하는 것을들을 때까지 나는 CSS 전환을 해제했다.

다른 수정 프로그램은 요소의 초기 위치를 애니메이션으로 설정하고 current-page 클래스를 제거하기 전에 패널이 완전히 나가기를 기다리는 것입니다.

JSFiddle : 나는 또한 약간의 중복 항목 (체인 선택기 등) 청소 http://jsfiddle.net/TrueBlueAussie/xoa029jz/8/

function slideToNext() { 
    var currentPage = $('.current-page'); 
    var nextPage = getNextPage(currentPage.attr('id')); 
    currentPage.css('left', '0%').animate({ 
     left: '-100%' 
    }, function() { 
     currentPage.removeClass('current-page'); 
    }); 
    nextPage.css({'display': 'block', 'left': '100%'}).addClass('current-page').animate({ 
     left: '0%' 
    }); 

} 

.

처음에는 jQuery 애니메이션을 사용하는 것이 좋습니다. 처음에는 작동시키면서 (예 : velocity.js과 같은) 플러그인을 추가하여 애니메이션에서 CSS 전환을 사용하는 대신 두 가지를 혼합하는 것이 좋습니다.