Saut d'animation dans Chrome

Question

Je suis en train de faire un saut de souris avec une simple animation jQuery. Une image glisse doucement au passage de la souris, mais au passage de la souris, elle saute quelques pixels avant de glisser vers le bas.

jsFiddle ici: http://jsfiddle.net/g_thom/HMS2Z/1/

je ne remarque pas la question dans Safari ou Firefox (et ne pas IE à portée de main pour le moment). J'ai essayé de définir explicitement la hauteur/largeur et de mettre à zéro la marge/marge, mais cela n'a eu aucun effet sur le saut.

Answer 1

Je mis à jour votre exemple avec bordure et nouvel affichage de l'image afin que vous puissiez le voir revient à sa position initiale sur mouseout: updated example

Answer 2

Je soupçonne que c'est parce que le mode d'animation jQuery par défaut a une vitesse lisse vers le haut et ralentir (appelé swing assouplissement) - ce qui provoque un arrêt soudain à apparaître comme un saut. Vous pouvez dire d'utiliser uniquement animer linear animation, ce qui empêche le saut:

$('img').hover(function() { 
    $(this).animate({ 'top': '-10' },1000, 'linear'); 
}, function() { 
    $(this).stop().animate({ 'top': '0' },1000,'linear'); 
}); 

http://jsfiddle.net/HMS2Z/4/