Home/ Questions/Q 5987299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:47:41+00:00

I’m using the latest version of JQuery and trying to animate a div to

  • 0

I’m using the latest version of JQuery and trying to animate a div to the left of the screen. It’s just about fine, except that it jumps up noticeably before actually animating. I’ve set it up in jsFiddle here http://jsfiddle.net/ns6string/agY2z/
Be sure to click on either ‘portfolio’ or ‘about’ to see what I’m dealing with.

You can see the code I’ve set up (I tried to clean it up) but here it is again, in case anyone doesn’t feel like hitting the jump 😉

HTML:

<body>
        <div id="header">
        HOME
        </div>
        <div id="menu">
            <div id="portfolio">
                <h3 class="menuitem" >Portfolio</h3>
            </div>
            <div id="about">
                <h3 id="about" class="menuitem">About</h3>
            </div>
        </div>
</body>

CSS:

body{ right: 0px; left: 0px; bottom: 0px; top: 0px; position: fixed; color: #444444; margin: 0px; background-color: #c7c7c7; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
#menu{ text-shadow: 1px 1px 3px white; position: fixed; margin-top:220px; width: 200px; margin-right: auto; margin-left: auto; right: auto; left: 47.5%; }
.menuitem{ display: inline-block; text-align: left; }

JS:

$(document).ready(function() {
    //Hovering stuff went here, shouldn't be relevant


    $(".menuitem").click(function() {
        $("#menu").animate({
            'top': '10%',
            'left': '7%'
        }, {
            duration: 500,
            queue: false
        }, function() {})
    });
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Firstly: Very odd issue.

    All you need to do is specify a css value for top: 5% on #menu (should be fine with any value if 5% is not what you want). This will stop the “shake” when you click it.

    On a side note I noticed that you’ve specified values for right and left. I would suggest removing the right value.

    • 0