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

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

1 个答案: