javascript - 负边距上的 jQuery 动画 - 意想不到的结果

Question

元素大纲

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

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

window

互联网浏览器 (11.0.9600.17239)火狐 (32.0)歌剧 (17.12)Chrome (38.0.2125.44 beta-m)

Mac

歌剧 (12.15)火狐 (32.0) Chrome (36.0.1985.125) Safari (6.0.5)

iOS

Chrome (37.0.2062.52)Safari(Iphone 5s - 找不到版本号)

问题浏览器

问题似乎只出现在 Windows (5.1.7) 上的 Safari；

问题

当您单击以滑出菜单时，它似乎重新加载并从右侧滑入，当它离开页面到左侧时，所以我假设它应该像我使用的所有其他浏览器一样从左侧滑入试过了!

当菜单退出并且您按下它以将其滑回时，它似乎向左滑出然后从右侧滑出并再次完全滑出左侧。

相关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/

Answer 1

在将函数事件与链接一起使用时，始终尝试使用 preventDefault:

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