1

jquery UI Scale が引き出して Div をイメージし、最初のものをスケールアウトする小さなスライダーを作成しようとしています。私の問題は、Google Chrome でスケーリングされると、スケーリングの過程で少し揺れることです。IEまたはFirefoxでは、振動/揺れがまったくない魅力のように機能します!

今、css で background-position:center を使用しない場合はもう揺れないことをテストしましたが、これを取り出すと、画像の中心からズームアウトされているようには見えなくなりました。これを取り除くにはどうすればよいですか？これが例です（Chromeで開きます）http://jsfiddle.net/gqLZe/

4

1 に答える 1

1

アニメーションをスローモーション (非常に長い時間) にすると、実際には div の下部が実際に 1 ピクセル上に移動することがわかります。これが揺れの原因です。スタイル インスペクタで見ると、jQuery が div の各位置プロパティを 10 進数に設定していることがわかります。これらの 10 進数の 1 つが整数を通過するたびに、実際には div の位置が変化します。頂点と高さは必ずしも同時に整数を通過するとは限らないため、揺れが発生します。一方、左と幅は常に整数を同時に渡すように見えますが、そうであるかどうかはわかりません。いずれにせよ、横揺れは判別できませんでした。

どうやらChromeは位置プロパティの小数を切り捨てていますが、他のブラウザは浮動小数点演算を使用して、丸めまたは切り捨ての前に絶対座標でdivの境界を計算しています。これがバグであるかどうかはわかりませんが (仕様を調べる必要があります)、最終的には修正/改善される可能性があります。jQuery はそのようなブラウザーの特性を回避するはずなので、おそらく jQuery のバグとして認定されます。

この問題を解決するには、別のスケーリング アルゴリズムを提供する必要があります。1 つの解決策は、他のブラウザが自動的に計算している値を JavaScript で計算し、この jsFiddle のように整数のみを Chrome に提供することです: http://jsfiddle.net/gqLZe/1/

このメソッドは、包含要素の上端または左端が整数でない場合 (ボーダーまたはマージンによる場合を含む)、他のブラウザーで同様の問題を引き起こす可能性がありますが、整数に固執する限り、問題なく動作するはずです。

別の解決策は、div を展開するサイズの親要素を提供し、rightandbottomではなくwidthandでアニメーション化することですheight。これは、jQuery を使用して非常に簡単に実行できますanimate()。

var width = $(".frame").width();
var height = $(".frame").height();
$(".frame").css({
    top: height / 2 + "px",
    bottom: height / 2 + "px",
    left: width / 2 + "px",
    right: width / 2 + "px"
}).show().animate({
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
}, 3000, 'linear');

jsFiddle: http://jsfiddle.net/gqLZe/3/

余分なマークアップ要素を持つことに耐えることができれば、おそらくそれが進むべき道です。

于 2012-06-18T04:45:03.520 に答える