我正在使用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,我们无法做任何事情。