CODEWITHSUNDEEP
jquery
Jim
Jim

Reputation: 723

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.

Upvotes: 0

Views: 458

Answers (3)

cambraca
cambraca

Reputation: 27827

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.

Upvotes: 2

methodin
methodin

Reputation: 6710

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.

Upvotes: 0

alex
alex

Reputation: 490423

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

Upvotes: 1

Related Questions