javascript - 当前页面滑入时将旧页面滑出

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 过渡，而不是尝试混合两者。