javascript 使用 jQuery 设置宽度动画时奇怪的“抖动”效果（仅在 Chrome 中！）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11761476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Odd "shaking" effect when animating width with jQuery (only in Chrome!)
提问by wnajar
I'm animating the width of a lielement using jQuery in a simple snippet of code. I'm using hover()as the handler and .animate()to animate the width. Here is my code.
我li在一个简单的代码片段中使用 jQuery为元素的宽度设置动画。我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')
}
);
});
The code is really really simple and works butwith one very odd quirk in Chrome. When animating the elements in and out, the lielements "shake" as if they're really cold and were shivering. You can see the behavior here in a live example: http://missmd.org/(edit: bug is now fixed)
代码真的非常简单并且有效，但在 Chrome 中有一个非常奇怪的怪癖。当动画元素进出时，li元素“摇晃”，好像它们真的很冷并且在颤抖。您可以在现场示例中查看行为：http: //missmd.org/（编辑：错误现已修复）
I've animated a bunch of stuff before with jQuery and never seen this behavior. Is there any explanation for why it occurs and how I can get around it? I'm wondering if it's because I've floated the elements to the right and am animating to the left. The bug is maddening and detracts from the overall presentation a lot (at least to me). Anyone else seen this before?
我之前用 jQuery 制作了一堆动画，但从未见过这种行为。有没有解释它为什么会发生以及我如何解决它？我想知道是不是因为我将元素向右浮动并在左侧设置动画。该错误令人发狂并大大减损了整体演示文稿（至少对我而言）。其他人以前见过这个吗？
Edit to clarify:it's not the actual lielement that "shivers" it's the text within it that shakes slightly but noticeably from left to right very quickly as the animation runs. I'm stumped.
编辑以澄清：它不是li“颤抖”的实际元素，而是其中的文本在动画运行时从左到右非常快速地轻微抖动但非常明显。我难住了。
Edit two:after fiddling with the CSS a bit now I can only reproduce the effect in Chrome(21.0.1180.60 beta-m for me). In Firefox it works as intended. It also works great in IE. Very ironic that Chrome (usually great with this stuff) is giving me trouble now. Pulls hair out, checks sanity
编辑二：在稍微摆弄 CSS 之后，我现在只能在Chrome 中重现效果（对我来说是 21.0.1180.60 beta-m）。在 Firefox 中，它按预期工作。它在 IE 中也很有效。非常具有讽刺意味的是，Chrome（通常对这些东西很好）现在给我带来了麻烦。拔头发，检查理智
Here is my HTML to help get to the bottom of this. We have reproduced the problem in ChrisFrancis' jsFiddle.
这是我的 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>
I'm completely stumped. This could also be a bug in Chrome/V8 JS engine and there's nothing we can do about it.
我完全被难住了。这也可能是 Chrome/V8 JS 引擎中的一个错误，我们对此无能为力。
采纳答案by Jaster
I changed your css: ul.nav li a, adding float: rightto it and that fix the shake.
我更改了您的 css: ul.nav li a，添加float: right到它并修复了抖动。
Anyway if it helps, I had the same problem when animating height of a div within another div with height:auto. Changing the height to a fix width solved it.
无论如何，如果有帮助，我在使用 height:auto 为另一个 div 中的 div 高度设置动画时遇到了同样的问题。将高度更改为固定宽度解决了它。
Hope it helps.
希望能帮助到你。
回答by bzin
I was looking to this issue as well and this: -webkit-backface-visibility: hidden;solve my problem. I add this odd shaking while using CSS3 transform on a SVG.
我也在关注这个问题，这个：-webkit-backface-visibility: hidden;解决我的问题。我在 SVG 上使用 CSS3 变换时添加了这种奇怪的抖动。
More info can be found here: CSS3 transform rotate causing 1px shift in Chrome
可以在此处找到更多信息：CSS3 变换旋转导致 Chrome 中的 1px 偏移
Hope it helps
希望能帮助到你
回答by wnajar
This seems to be a bug in Chrome version 21.0.1180.60 and may also be present in other versions. Nothing wrong with the code here and I guess we just leave it up to workarounds or submitting a bug report now.
这似乎是 Chrome 版本 21.0.1180.60 中的一个错误，也可能存在于其他版本中。这里的代码没有任何问题，我想我们只是将其留给解决方法或现在提交错误报告。
Sigh.
叹。
回答by artnikpro
Had similar issue with shaking SVGs when there's a CSS transition applied to parent tag. I tried to apply everything I could randomly, and this fix finally helped:
当将 CSS 转换应用于父标签时，晃动 SVG 也有类似的问题。我尝试随机应用所有我可以应用的东西，这个修复终于有所帮助：
svg {
transform: translate3d(0, 0, 0);
}
回答by Ghost-Man
This problem occurred with some divs when I was trying to animate another div within it. What I noticed is that it happens if the div or element has css property display:inline-block. Making the element float would have solved the problem, but inline-blockwas required in my case.
div当我尝试为其中的另一个 div 设置动画时，某些s出现了这个问题。我注意到的是，如果 div 或元素具有 css 属性，就会发生这种情况display:inline-block。使元素浮动可以解决问题，但inline-block在我的情况下是必需的。
I noticed that the element had also vertical-align:middlecss property. Changing it to vertical-align:text-bottomsolved the problem. No more shaking effect in Chromev23 (may be the bug is still persisting in newer versions).
我注意到该元素也有vertical-align:middlecss 属性。更改它以vertical-align:text-bottom解决问题。Chromev23 中没有更多的抖动效果（可能是该错误在新版本中仍然存在）。
