7

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')
        }
   );
});

コードは非常にシンプルで機能しますが、Chrome には非常に奇妙な癖が 1 つあります。要素を内外にアニメーション化すると、要素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 エンジンのバグである可能性もあり、私たちができることは何もありません。

4

5 に答える 5

5

私もこの問題に目を向けていましたが、これは-webkit-backface-visibility: hidden;私の問題を解決することです。SVG で CSS3 変換を使用しているときに、この奇妙な揺れを追加します。

詳細については、次を参照してください: CSS3 変換回転により、Chrome で 1 ピクセル シフトが発生する

それが役に立てば幸い

于 2014-04-29T08:45:55.897 に答える
4

私はあなたの css: を変更し、それul.nav li aに追加float: rightして、揺れを修正しました。

とにかく、それが役立つ場合は、height:auto を使用して別の div 内の div の高さをアニメーション化するときに同じ問題が発生しました。高さを固定幅に変更すると解決しました。

それが役に立てば幸い。

于 2012-10-15T08:37:45.630 に答える
2

これは Chrome バージョン 21.0.1180.60 のバグのようで、他のバージョンにも存在する可能性があります。ここのコードに問題はありません。回避策に任せるか、今すぐバグ レポートを提出してください。

はぁ。

于 2012-08-01T15:11:00.447 に答える
0

この問題は、その中divの別の div をアニメーション化しようとしたときに、いくつかの s で発生しました。私が気づいたのは、div または要素に css プロパティがある場合に発生することですdisplay:inline-block。要素をフロートにすれば問題は解決しますがinline-block、私の場合は必要でした。

vertical-align:middle要素にはcss プロパティもあることに気付きました。それを変更してvertical-align:text-bottom問題を解決しました。Chrome v23 ではシェイク効果はなくなりました (新しいバージョンでもバグが残っている可能性があります)。

于 2012-12-23T03:52:45.697 に答える