CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zephryte Zephryte
Zephryte Zephryte

Reputation: 39

jQuery page animation makes button jump

So I was busy on a site, and I made a menu button with a menu which is hidden on the right side of the page as shown below:

enter image description here

When I press the red button, which is used to open the menu, the button jumps like 15px to the left. enter image description here

As you can see, the button jumps, I would recommend using the black header to measure.

The button stays in its new position until I refresh the page.

Here is my 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);
    }
}

Does anybody see any mistakes? Also, if more code is needed, please comment.

EDIT:

My 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;
}

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

Upvotes: 0

Views: 235

Answers (1)

Subin
Subin

Reputation: 3563

The #zijmenu-knop already has a margin-right property.

When opening the menu, #zijmenu-knop has right value of 300px along with the margin-right of 3%.

So, the total distance from right increases making it move to the left a little more. All you have to do is replace the margin-right property of #zijmenu-knop to right and it becomes :

#zijmenu-knop{
  right: 3%;
}

By doing this, when the menu opens, the above rule of right is replaced by 300px which makes the distance from right side correct.

To make the position from right better, I would suggest to increase the right value from 300px to 315px, because the width of #zijmenu is 305px.

Upvotes: 2

Related Questions