Анимация прыжка в Chrome

Question

Я получаю прыжок на мышке с простой анимацией jQuery. При наведении курсора изображение плавно перемещается вверх, но при наведении курсора оно прыгает на несколько пикселей вверх, а затем скользит вниз.

jsfiddle здесь: http://jsfiddle.net/g_thom/HMS2Z/1/

Я не замечаю проблему в Safari или Firefox (и в данный момент у меня нет под рукой IE). Я попытался установить высоту / ширину явно и обнулить поля / отступы, но это не повлияло на прыжок.

Answer 1

Я подозреваю, что это связано с тем, что режим анимации jQuery по умолчанию имеет плавное ускорение и замедление (называемое swing замедлением) - что приводит к внезапному останову, похожему на прыжок. Вы можете указать animate использовать только анимацию linear, которая предотвращает переход:

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

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

Answer 2

Я обновил ваш пример с рамкой и новым отображением изображения, чтобы вы могли видеть, что оно возвращается в исходное положение при наведении мыши: обновленный пример