奇数QUOT;摇动＆QUOT;动画与jQuery宽度时的影响（仅适用于Chrome！） [英] Odd "shaking" effect when animating width with jQuery (only in Chrome!)

问题描述

我在动画code的简单片段使用jQuery一个里元素的宽度。我使用悬停（）的处理程序和 .animate（）动画的宽度。这里是我的code。

I'm animating the width of a li element 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').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')
        }
   );
}); 

在code是真的很简单，作品但与镀铬非常奇怪的怪癖。当进出动画的元素，在里元素的换血，仿佛他们真的寒冷并发抖。你可以在这里看到的行为在一个活生生的例子： http://missmd.org/ （编辑：现在的错误是固定的）

The code is really really simple and works but with one very odd quirk in Chrome. When animating the elements in and out, the li elements "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)

我的动画一堆东西用jQuery以前从来没见过这种行为。是否有它为什么发生任何解释，我怎样才能解决呢？我不知道是否是因为我已经浮动元素的权利和我动画左侧。该缺陷是郁闷，并从整体presentation很多（至少对我来说）减损。任何其他前看到了这一点？

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?

修改，以澄清：它不是实际的里元素不寒而栗这是从左至右略有但明显甩头内的文字右很快作为动画运行。我难倒。

Edit to clarify: it's not the actual li element 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.

修改二：与CSS摆弄了一下，现在我只能重现（对我来说21.0.1180.60的β-米）的 Chrome浏览器后的效果。在Firefox它按预期工作。它还在IE的伟大工程。很讽刺的是，Chrome的（通常这个东西大）现在给我找麻烦。的拉头发，支票理智的

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

下面是我的HTML帮助到这条底线。我们转载ChrisFrancis'的jsfiddle的问题。

Here is my HTML to help get to the bottom of this. We have reproduced the problem in 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引擎中的错误并没有什么，我们能做些什么。

I'm completely stumped. This could also be a bug in Chrome/V8 JS engine and there's nothing we can do about it.

推荐答案

我改变你的CSS： ul.nav李一，加入浮动：权将其和修复抖动。

I changed your css: ul.nav li a, adding float: right to it and that fix the shake.

无论如何，如果有帮助，具有高度的另一个div中动画的div的高度时，我有同样的问题：汽车。改变高度修复宽度解决了这个问题。

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.

希望它帮助。

这篇关于奇数QUOT;摇动＆QUOT;动画与jQuery宽度时的影响（仅适用于Chrome！）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！