在当前页面滑入时将旧页面滑出

Question

我在单页网站上使用 jquery 在用户单击按钮时将下一个 "page" 滑动到屏幕上。我希望当前页面在新页面从右侧滑入时向左滑出，这样就不会显示空的 space ，但目前我只能让当前页面消失，因为下一页滑入。我使用的代码在这里：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 class。

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 转换，而不是尝试将两者混合。

在当前页面滑入时将旧页面滑出

Slide old page out as current page slides in

javascript

jquery