Question

我通过一个简单的jQuery动画获得了mouseout的跳跃。图像在鼠标悬停时平滑滑动，但在鼠标移开时，它会向下跳动几个像素，然后向下滑动。

jsfiddle here：http://jsfiddle.net/g_thom/HMS2Z/1/

我没有注意到Safari或Firefox中的问题（目前还没有IE方便）。我尝试明确设置高度/宽度，并将边距/填充清零，但这对跳转没有任何影响。

Answer 1

我怀疑这是因为默认的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/

Answer 2

我使用图片的边框和新显示更新了您的示例，以便您可以看到它返回到鼠标输出的初始位置：updated example

Chrome中的动画跳转

2 个答案: