Javascript 负边距上的jQuery动画-意外结果 项目大纲

我正在构建一个带有滑出菜单的网页，该菜单按预期工作，并且在动画中将菜单滑入/滑出期间，显示保持我预期的方式

这在以下浏览器上正常工作； 窗户 Internet Explorer（11.0.9600.17239） Firefox（32.0） 歌剧院（17.12） 铬（38.0.2125.44β-m）

雨衣 歌剧院（12.15） FireFox（32.0） 铬（36.0.1985.125） 狩猎（6.0.5）

网间网操作系统 铬（37.0.2062.52） Safari（Iphone 5s-找不到版本号）

问题浏览器 问题似乎只存在于windows上的Safari（5.1.7）

问题 当您单击以滑出菜单时，它似乎会重新加载并从右侧滑入，当它从页面左侧滑入时，因此我认为它应该像我尝试过的其他浏览器一样从左侧滑入

当菜单退出并按下使其滑回时，它似乎向左滑出，然后从右滑出，再从左滑出

相关JSFIDLE链接和代码 （文章末尾的链接）

JS CSS HTML

菜单
在使用带有链接的函数事件时，始终尝试使用preventDefault：

$('#menu a').click(function (e) {
        e.preventDefault();
        menu_move();
    });

哎呀，我去掉了我不需要显示的东西——在添加到fiddle之前，意外地从jQuery中删除了该部分——不过这很好：）
* {
    font-family:"Helvetica Neu", "Helvetica", sans-serif;
}
html, body {
    background: #c3c3c3;
    font-weight: 300;
    margin: 0;
}
#container {
    position: relative;
    background: black;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}
#menu {
    background: #000;
    height: 100%;
    width: 70%;
    margin: 0;
    padding: 0;
    color: white;
    margin-left: -71%;
    float: left;
}
.menu_item {
    width: 100%;
    border-bottom: solid 1px #333;
    background: #222222;
    height: 40px;
    font-size: 14px;
    color: #fff;
}
.menu_item a {
    font-size: 14px;
    font-weight: 400;
    display: block;
    color: white;
    text-decoration: none;
    padding: 12px 0 0 15px;
}
.menu_head {
    height: 47px;
}
.menu_head h1 {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 0 15px 10px;
    margin: 0;
    background: #000;
    border-bottom: solid 1px #333;
}
#content {
    color: white;
    overflow: hidden;
}
.top_button {
    border: none;
    background: black;
    position: absolute;
    top: 11px;
    left: 18px;
}
.button_strips {
    width: 21px;
    height: 3px;
    margin: 3px 5px;
    background: white;
}
.top {
    height: 46px;
    border-bottom: solid 1px #333;
    position: relative;
}
.display {
    text-align: right;
    white-space: nowrap
}
p {
    white-space: nowrap;
}

<div id="container">
    <div id="menu">
        <div class="menu_head"><h1>MENU</h1></div>
        <div class="menu_item"><a href="#">Link 1</a></div>
        <div class="menu_item"><a href="#">Link 2</a></div>
        <div class="menu_item"><a href="#">Link 3</a></div>
        <div class="menu_item"><a href="#">Link 4</a></div>
        <div class="menu_item"><a href="#">Link 5</a></div>
    </div>
    <div id="content">
        <div class="top"> <a class="top_button">
            <div class="button_strips"></div>
            <div class="button_strips"></div>
            <div class="button_strips"></div>
          </a>
        </div>
        <div class="display">
            <!-- Add text when needed /-->
        </div>
    </div>
</div>

$('#menu a').click(function (e) {
        e.preventDefault();
        menu_move();
    });