Слайд старой страницы в качестве текущих слайдов страницы в

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, а не пытались их смешивать.