Javascript jQuery页面动画使按钮跳跃

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

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

如您所见，按钮会跳跃，我建议使用黑色标题进行测量

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

以下是我的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>

GH 24小时
维佐利宁酒店
打开推特订阅源

这个

#zijmenu knop

已经有了一个

边距权

属性

打开菜单时，

#zijmenu knop

具有

right

值

300px

以及

右边距
值
3%

因此，从右侧到右侧的总距离增加，使其向左移动多一点。您只需将
#zijmenu knop
的
margin right
属性替换为
right
，它将变为：

#zijmenu-knop{
  right: 3%;
}

这样，当菜单打开时，上面的
right
规则将被
300px
替换，从而使右侧距离正确

为了使右侧的位置更好，我建议将
right
值从
300px
增加到
315px
，因为
#zijmenu
的宽度是
305px
，这可能取决于您的
HTML
和
CSS
，您还没有共享这些内容。。。