我正在使用jQuery对一个li元素的宽度进行动画处理，代码非常简单。我使用hover()作为事件处理程序，并使用.animate()来实现宽度动画效果。以下是我的代码。
$('li').each(function() {
//store the original width of the element in a variable
var oldWidth = $(this).width();
$(this).hover(
function() {
//when the mouse enters the element, animate width to 900px
$(this).animate({width: '900px'}, 600, 'linear')
},
function() {
//when the mouse leaves, animate back to the original width
$(this).animate({width: oldWidth}, 350, 'linear')
}
);
});
这段代码非常简单，而且效果很好，但在Chrome中有一个非常奇怪的问题。当元素进入和退出时，
li元素会“摇晃”，就像它们非常寒冷并在颤抖。您可以在此处查看实际行为：http://missmd.org/（编辑：现已修复错误）。我以前使用jQuery动画了很多东西，从未看到过这种行为。是否有任何解释为什么会发生这种情况以及如何避免它？我想知道是否因为我将元素浮动到右侧并进行向左动画。这个漏洞令人疯狂，并且在很大程度上削弱了整体表现（至少对我来说是这样）。其他人之前见过吗？ 编辑澄清：实际上不是
li元素本身在“颤抖”，而是其中的文本在动画运行时稍微向左右晃动，非常明显。我感到困惑。
编辑2：稍微调整了一下 CSS，现在我只能在Chrome（21.0.1180.60 beta-m）中重现这种效果。在Firefox中，它按预期工作。在IE中也很好用。非常讽刺的是，Chrome（通常在这方面做得很好）现在给我带来了麻烦。拔掉头发，检查理智
这是我的HTML代码，以帮助解决问题。我们已经在ChrisFrancis的jsFiddle中重现了这个问题。
<nav>
<ul class="nav">
<li class="one">
<a href="homeandnews/">
<span class="title">Home and News</span>
<br/>
<span class="subtitle">Learn more about me and read general updates!</span>
</a>
</li>
</ul>
<nav>
我完全被难住了。这可能也是Chrome/V8 JS引擎中的一个bug，我们无法做任何事情。