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属性。

打开菜单时，#zijmenu-knop的{​​{1}}值为right以及300px的{​​{1}}。

因此，距离右侧的总距离增加，使其向左移动一点点。您所要做的就是将margin-right的{​​{1}}属性替换为3%，它变为：

margin-right

通过执行此操作，当菜单打开时，#zijmenu-knop的上述规则将替换为right，这使得右侧距离正确。

为了使位置更好，我建议将#zijmenu-knop{ right: 3%; } 值从right增加到300px，因为right的宽度为300px }。