First-time JQuery hover effect jumps to endpoint, normal thereafter

Question

Here's a poser:

Load the page, on first time mouseover hover of the Mail and LinkedIn Tabs, the animation jumps to the endpoint frame. It should animate the tab drop.

After the first hover, everything is OK, hover behaves as expected. Tried mouseenter, mouseover and hover. Personally, I like mouseenter best but that's me. The behavior is similar to the horizontal topics buttons below, which don't exhibit the jump. Weird.

Code looks like this:

$("#zipperTabLinkedin a")
    .mouseenter(function(e){
        $(this).animate(
            {padding:'30px 0 0 0'},
            {duration:500},
            {easing:'swing'})
    })
    .mouseleave(function(e){
        $(this).animate(
        {padding:'5px 0 0 0'},
        {duration:500},
        {easing:'swing'})
});

Just weird. You can see the effect at: http://desertbiz.biz/repl.html

Answer 1

Here is a solution with css3 transitions which never fails.

Fiddle demo

use the transion property to animate it.

 -webkit-transition:padding-top 0.1s ease-in;

Tutorial for css3 transitions

www.w3schools.com/css3/css3_transitions.asp

(only drawback is you should write cross browser css)

Answer 2

remove the padding-top in the a:hover.

http://jsfiddle.net/7Mwja/6/