1

私はJQueryのアニメーションメニューをやっています。これは、私の質問に関連するコードの一部です。

私は（JQueryを使用して）アニメーション化されたdivをたくさん持っているので、左右に拡大します。div では背景画像を使用します。div が拡大および縮小するときに、画像が動かないように配置したままにします。

これは (動作する) 自己完結型の完全な例です。これを .html として保存して試してください。（どうにかスタックオーバーフローでこれを添付できますか？）

http://jsbin.com/eyojah

<!DOCTYPE html>
<html>
    <head>
        <title>JQuery Jitter Bug</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <style>
            body { background: #0f1923; margin:0px; padding:0px;}
            div#logo {
                border: 0px;
                margin: 0px;
                padding: 0px;
                background-image: url("http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"); 
                background-position:20%; 
                position: absolute;
                height: 53px;
                left: 100px;
                width: 100px;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <div id="logo"></div>
        <script>
            $('div#logo').mouseenter(function(){$(this).animate( {left: "0px", width: "600px"}, 1000); }); /* show */
            $('div#logo').mouseleave(function(){$(this).animate( {left: "100px", width: "100px"}, 1000); });  /* crop */
        </script>
    </body>
</html>

2 つの質問:

1) バックグラウンド ポジションのパーセンテージはどのように計算されますか? 試行錯誤の結果、ここでは 20% が正しいことがわかりました。div は、展開時は左 = 0、幅 = 600 ピクセル、折りたたみ時は左 = 100、幅 = 100 です。それがどうやって20%になるの？折りたたまれたサイズの左端であるべきではありませんか (100/600 = 16.666%?) 明らかにそうではありませんが、なぜですか?

2) これは Firefox では桃色に見えますが、Safari と Chrome (私は OSX を使用しています) では、アニメーションの進行中に画像が揺れます。他のブラウザで見栄えが良くなるように修正する方法について何か考えはありますか?

4

1 に答える 1

0

私は多くのことを試しましたが、最終的にはこのバージョンで終わります: http://jsfiddle.net/NC2pq/ Chrome 13.0.782.215 および Firefox v6 (Ubuntu 上) で問題なく動作します。

最初に、background-position に固定値を設定してから、このプロパティをアニメーション化しようとしましたが、結局のところ、単純な jQuery を使用して backgroundPosition をアニメーション化することはできません (そのためのプラグインをいくつか見つけましたが、それに従いませんでした考え）。

結局、位置を簡単にアニメーション化できる別のコンテナを作成する必要がありました。

もちろん、それは一種の概念実証です。実際の使用には、対処している状況に応じて、パフォーマンスとプレゼンテーションの微調整が必​​要になります。

于 2011-09-08T08:30:29.103 に答える