JQuery Animation overshooting

Example: http://wispinternet.com/glencoe/

When the page is first loaded, the first time you mouse over one of the tabs in the top right, the tab moves 开发者_运维百科out further than intended, then moves back to the intended position. After that, it works as intended.

Not sure what's causing this, as it all looks ok. I tried changing the easing style to linear, but it has no effect. I'm no JQuery expert, although I guess it could be a problem with my CSS.

Apologies if viewing the source shows the HTML inline, seems to be a bug with Dreamweaver.

You should add this CSS to your lis: margin: 70px 0px 0px;. Also, in Firefox the images have a blue thick border. You should CSS them away.

edit Better answer:

Change your jquery to this:

$("#nav li").mouseover(function(){
    $(this).stop().animate({marginTop:50},{duration:500})
});

$("#nav li").mouseout(function(){
    $(this).stop().animate({marginTop:70},{duration:500})
}); 

For some reason it seems to work this way.

You have a :hover pseudo class on your li elements. Remove the negative top property.

If you were to set the style="margin:70px 0px 0px 0px" inline in each li element it would work. When your first mouseover there is no visible margin property inline so jquery assigns 0px 0px 0px 0px which is why you see the jump.

<li style="margin:70px 0px 0px 0px"><a href="home.php"><img src="images/home_tab.png" alt="Home" width="65" height="200" /></a></li>
<li style="margin:70px 0px 0px 0px"><a href="gallery.php"><img src="images/gallery_tab.png" alt="Gallery" width="65" height="200" /></a></li>
<li style="margin:70px 0px 0px 0px"><a href="booking.php"><img src="images/booking_tab.png" alt="Booking" width="65" height="200" /></a></li>
<li style="margin:70px 0px 0px 0px"><a href="contact.php"><img src="images/contact_tab.png" alt="Contact" width="65" height="200" /></a></li>

You could also just use margin-top:70px and animate that specific property.