Chrome中的动画跳转

Posted 2023-05-08

【中文标题】Chrome中的动画跳转

【英文标题】：Animation jump in Chrome

【发布时间】：2011-10-08 05:27:43

【问题描述】：

我正在使用一个简单的 jQuery 动画跳过鼠标。图像在鼠标悬停时平滑地向上滑动，但在鼠标悬停时，它会在向下滑动之前向上跳跃几个像素。

jsfiddle 在这里：http://jsfiddle.net/g_thom/HMS2Z/1/

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

【参考方案1】：

我怀疑这是因为默认的 jQuery 动画模式具有平滑的加速和减速（称为swing easing） - 这会导致突然停止看起来像跳跃。你可以告诉 animate 只使用linear 动画，这样可以防止跳转：

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

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

【讨论】：

这很有意义。不幸的是，跳跃仍然存在，但无论如何你都很难给出建议，除非你能看到它。

在我的 Chrome 版本中 - 12.0.742.112 (90304) 在 Ubuntu 上运行，这修复了它。您使用的是哪个版本的 Chrome？

【参考方案2】：

我更新了您的示例，为图像添加了边框和新显示，以便您可以看到它在鼠标移出时返回到它的初始位置：updated example