jQuery负边距动画-意外结果

项目大纲

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

这在以下浏览器上正常工作

Windows

Internet Explorer（11.0.9600.17239）Firefox（32.0）歌剧（17.12）铬（38.0.2125.44β-m）

Mac

歌剧（12.15）火狐（32.0）铬（36.0.1985.125）Safari（6.0.5）

iOS

铬（37.0.2062.52）Safari（Iphone 5s-找不到版本号）

问题浏览器

问题似乎只出现在windows上的Safari（5.1.7）；

问题

当你点击滑出菜单时，它似乎会重新加载并从右边滑入，当它离开页面向左滑入时，所以我认为它应该像我尝试过的其他浏览器一样从左边滑入！

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

相关jsFiddle链接和代码

（帖子末尾的链接）

JS

$(document).ready(function () {
    // Set menu_out var, for clicks to activate slideIn/Out
    var menu_out = false;
    
    // Works if menu is in OR out;
    $(".top_button").click(function () {
        menu_move();
    });
    $('#menu a').click(function () {
        menu_move();
    });
    // Only work if menu if out;
    $('#content').click(function () {
        if (menu_out == true) {
            menu_move();
        }
    });
    function menu_move() {
        if (menu_out) {
            $('#menu').animate({
                'margin-left': "-71%"
            }, 300, function () {
                menu_out = false;
            });
        } 
        else {
            $('#menu').animate({
                'margin-left': "0"
            }, 300, function () {
                menu_out = true;
            });
        }
    }
});

CSS

* {
    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;
}

HTML

<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>

http://jsfiddle.net/L7zs39dj/

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