javascript - jQuery 页面动画让按钮跳转

Question

所以我在一个网站上很忙，我做了一个菜单按钮，菜单隐藏在页面右侧，如下所示:

当我按下用于打开菜单的红色按钮时，按钮向左跳动 15px。

如你所见，按钮跳动，我建议使用黑色表头进行测量。

在我刷新页面之前，按钮会保持在新位置。

这是我的 jQuery:

$("#zijmenu-knop").click(function()
    {
        if($("#zijmenu").css('right') == '0px')
        {
            controlZijmenu('dicht');
        }else if($("#zijmenu").css('right') == '-300px')
        {
            controlZijmenu('open');
        }
    });
function controlZijmenu(controller)
{
    if(controller == 'dicht')
    {
        $("#zijmenu").stop(true).animate(
        {
            right : '-300px'
        }, 500);

        $("#mainSite, #zijmenu-knop").stop(true).animate(
        {
            right : '0px'
        }, 500);
    }else if(controller == 'open')
    {
        $("#zijmenu").stop(true).animate(
        {
            right : '0px'
        }, 500);

        $("#mainSite, #zijmenu-knop").stop(true).animate(
        {
            right : '300px'
        }, 500);
    }
}

有人看到任何错误吗？另外，如果需要更多代码，请发表评论。

编辑:

我的 CSS:

    #zijmenu-knop {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(../img/menuknopje.png);
    background-repeat: no-repeat;
    z-index: 101;
    position: fixed;
    margin-top: -45px;
    margin-right:3%;
    margin-left:97%;
}

#zijmenu {
    background: #DD5C65;
    height:100%;
    width:305px;
    position: fixed;
    z-index: 100000;
    overflow: hidden;
    right: -300px;
}

#mainSite{
    width:100%;
    position: fixed;
    z-index: 1000;
    right: 0px;
    overflow: auto;
}

我的 HTML:

<div id="zijmenu">
    <p class="zijmenu-titel">GH 24Hourz</p>
    <div id="zijmenu-nieuwtjes">
        <div class="zijmenu-shouts">
            Open de verzoeklijnen
        </div>
        <a><div class="zijmenu-twitter"></a>
            Open de twitter feed
        </div>

    </div>
</div>
<div id='mainSite'>
    <header></header>
    <div class="shadow">
        <div id='zijmenu-knop'></div>
    </div>

Answer 1

#zijmenu-knop已经有一个 margin-right属性(property)。

打开菜单时，#zijmenu-knop有right 300px 的值连同 margin-right的 3% .

因此，与右侧的总距离增加，使其向左移动了一点。您所要做的就是更换 margin-right #zijmenu-knop的属性(property)至 right它变成了:

#zijmenu-knop{
  right: 3%;
}

通过这样做，当菜单打开时，right 的上述规则被 300px 取代这使得与右侧的距离正确。

为了让右边的位置更好，我建议增加 right来自 300px 的值至 315px , 因为 #zijmenu 的宽度是305px .