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

Question

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

这个 fiddle 最能说明问题: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

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

未经测试的代码:

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

...

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

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

希望这对您有所帮助。