Question

所以我目前有一个设置允许按下按钮，当前内容被隐藏，更多内容从右侧滚动。然而我的问题是，在最短暂的时刻，位于内容下方的页脚向上移动，然后向下移动到刚刚加载的内容之下。

这个小提琴最能说明问题：http://jsfiddle.net/9Dubr/766/

我的代码：

$('#rightButton').click(function(){

    var toLoad = 'page.html #content';

    $('#content').hide("fast", loadContent);

    function loadContent() {
        $('#content').load(toLoad,'',showNewContent);
    }

    function showNewContent() {
        $('#content').show("slide", {direction: "right" }, 1000 );
    }

    return false;

});

感谢您的帮助

Answer 1

小提琴对我来说似乎不起作用，但听起来像你的页脚只是试图占据前一个内容留下的空白空间。在这种情况下，您可以尝试在隐藏内容之前将内容的父容器设置为固定高度。然后，您可以在加载下一个内容后取消设置高度，这样页脚就没有任何空白空间可以尝试占用。

未经测试的代码：

$('#content').parent().css({height: $('#content').height()});
$('#content').hide("fast", loadContent);

...

function showNewContent() {
    $('#content').show("slide", {direction: "right", complete: function() {
        $('#content').parent().css({height: ''});
    } }, 1000 );
}

如果你想让它更具视觉吸引力，你可以设置高度的动画，这样页脚就可以更顺畅地推/拉。

希望这有帮助。

Answer 2

这可能是因为允许页面调整div的长度。一些可行的建议是：

快速修正：

隐藏页脚直到此人位于屏幕底部
使您的页脚成为静态大小，甚至可能使页脚位置最终。
如上一条评论中所述，在对象周围添加固定大小的容器。

这样至少它赢了;不管怎么打扰页脚。

修改而不更改页脚：

按下按钮本身显然是一个负载问题。因为我按下您的代码时按下按钮，然后在使用幻灯片效果之前将这些新内容添加到您的页面。

我建议您在首次打开页面时 预加载 内容，然后在按下按钮时使用.slide（）。

JavaScript通过在不丢失高度的情况下滑动更多内容来替换内容

2 个答案: