Jquery CSS位置帮助（动画内容结束时显示水平侧栏）

让我尽我最大的努力解释我希望发生的事情，向你展示我的代码，希望我能得到一些帮助

因此，我尝试从屏幕左侧制作一个滑动导航UI（就像许多移动应用程序一样）。主要内容将滑过，显示下面的导航菜单

现在，浏览器认为屏幕越来越宽，并引入了一个水平滚动条。然而，我不想发生这种事

如何使div在屏幕外设置动画，但不放大屏幕宽度（即，使其部分离开屏幕）

总之，这是我的小提琴：

以下是帖子中的代码：

HTML

<div id='wrapper'>
    <div id='navWide'> </div>
    <div id='containerWide'> </div>
    <div id='containerTall'>
        <div id='container'>
            <div id='nav'>
                <div id='navNavigate'> Open Menu </div>
                <div id='navNavigateHide'> Close Menu </div>
            </div>
        </div>
    </div>
    <div id='sideContainerTall'>
        <div id='sideContainer'>
            <div id='sideNav'>Side Navigation </div>
        </div>
    </div>
</div>

Javascript

$(document).ready(function() {

    $('div#navNavigate').click(function() {

        $('div#navNavigate').hide();

        $('div#navNavigateHide').show();

        $('div#sideContainer').show();

        $('div#containerTall').animate({
            'left': '+=264px'
        });
    });

    $('div#navNavigateHide').click(function() {

        $('div#navNavigate').show();

        $('div#navNavigateHide').hide();
        $('div#containerTall').animate({
            'left': '-=264px'
        }, function() {
            $('div#sideContainer').hide();
        });
    });

});

---

因此，一个真正的快速修复方法是对html/正文应用hidden溢出（您还需要像这样定义高度和宽度）：

查看更新的JSFIDLE：

--编辑--

如果你想要Facebook或Path等应用程序的侧面板视图效果，那么你可以通过更简单的布局/css来实现

请参见JSFIDLE上的一个示例：

---

这里的示例基于iPhone的宽度，但您可以根据需要检测屏幕大小并显示内容。

因此，真正的快速解决方法是在html/正文中应用隐藏溢出（您还需要像这样定义高度和宽度）：

查看更新的JSFIDLE：

--编辑--

如果你想要Facebook或Path等应用程序的侧面板视图效果，那么你可以通过更简单的布局/css来实现

请参见JSFIDLE上的一个示例：

---

这里的示例基于iPhone的宽度，但您可以根据需要检测屏幕大小并显示内容。

您的问题是什么？主要问题是使用.animate（）函数使移动的元素远离屏幕，而不是通过使页面变宽并引入水平滚动条使剩余的元素留在屏幕上。我还有另外两个问题，但为了保持简单，我把它们去掉了。你的问题到底是什么？主要的问题是使.animate（）函数使被移动的元素不在屏幕上，而不是使页面变宽并产生一个水平滚动条，从而使剩下的元素在屏幕上。我还有另外两个问题，但为了保持简单，我把它们去掉了。

$(document).ready(function() {

    $('div#navNavigate').click(function() {

        $('div#navNavigate').hide();

        $('div#navNavigateHide').show();

        $('div#sideContainer').show();

        $('div#containerTall').animate({
            'left': '+=264px'
        });
    });

    $('div#navNavigateHide').click(function() {

        $('div#navNavigate').show();

        $('div#navNavigateHide').hide();
        $('div#containerTall').animate({
            'left': '-=264px'
        }, function() {
            $('div#sideContainer').hide();
        });
    });

});

html, body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
}