Chrome中的動畫跳轉

Question

我使用簡單的jQuery動畫跳轉到mouseout。在鼠標懸停時，圖像平滑地向上滑動，但在鼠標懸停時，它會向上滑動幾個像素，然後向下滑動。

的jsfiddle這裏：http://jsfiddle.net/g_thom/HMS2Z/1/

我沒有注意到在Safari或Firefox的問題（並且沒有IE瀏覽器方便的時刻）。我試圖明確地設置高度/寬度，並清除邊距/填充，但這對跳轉沒有任何影響。

Answer 1

我與邊框和新的顯示更新你的榜樣的形象，這樣你可以看到它返回到它的鼠標移開時的初始位置：updated example

Answer 2

我懷疑這是因爲默認的jQuery動畫模式具有平滑加速並放慢速度（稱爲swing緩動） - 這會導致突然停止出現跳躍。你可以告訴動畫只使用linear動畫，這樣可以防止跳：

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

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