Première effet JQuery de vol stationnaire saute au point final, normal par la suite

Question

Voici un poseur:

Chargez la page, sur première fois vol stationnaire mouseover du Mail et LinkedIn onglets, l'animation saute au cadre de point final. Il devrait animer l'onglet drop.

Après le premier vol stationnaire, tout est OK, le vol stationnaire se comporte comme prévu. Mouseenter essayé, mouseover et vol stationnaire. Personnellement, j'aime mieux mouseenter mais c'est moi. Le comportement est similaire aux boutons de sujets horizontaux ci-dessous, qui ne présentent pas le saut. Bizarre.

code ressemble à ceci:

$("#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'}) 
}); 

bizarre. Vous pouvez voir l'effet à: http://desertbiz.biz/repl.html

Answer 1

Voici une solution avec des transitions css3 qui n'échoue jamais.

Fiddle demo

utiliser la propriété transion pour l'animer.

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

Tutoriel pour les transitions CSS3

www.w3schools.com/css3/css3_transitions.asp

(seul inconvénient est que vous devez écrire un fichier CSS croix navigateur)

Answer 2

retirer le padding-top dans le a:hover.

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