Problem with div element jumping up a few pixels in JQuery animation
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>
</开发者_Python百科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() {})
});
});
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.
加载中,请稍侯......
精彩评论