0

jQuery プラグイン 'iCheckbox' (http://stackoverflow.com/questions/6032538/) をアップグレードして jQuery 1.4.4 以上で動作するようにしようとして、

 animate({backgroundPosition:'10px 0px'})

に変更する必要がありました

animate({backgroundPositionX: '10px', backgroundPositionY:  '0px'})

1 つのパラメーターを持つプロパティのみを使用する必要があるためです。これまでのところ、これは理にかなっていますが、待ってください.. Safari と Chrome では正常に動作していますが、FF4 (すべて Mac 上) では動作していません。

だから私はこれとそれを試してみましたが、最終的にそれを変更すると

animate({backgroundPosition: '10px'})

それはどこでも動作します！しかし、ここで何が起こっているのですか？パラメータを 1 つ指定するだけで動作しますが、それが X 軸用か Y 軸用かは指定していません (したがって、デフォルトで X 軸になっているようですが、Y 軸で動作させたい場合はどうすればよいでしょうか?)

これは奇妙に思えます。ここでの私の解決策は正しい方法ではありません..だから、アドバイスが必要です:

どうしたの？

jQuery 1.4 - 1.6 を使用して背景位置をどのようにアニメーション化すれば、ブラウザ間で動作するようになりますか?

4

2 に答える 2

1

まず、JQuery は 2 つの値を同時にアニメーション化することができないため、2 つの値を入力してbackgroundPositionもまったく機能しないことがわかりました。また、px値については、JQueryドキュメントでは、.px

第 2 に、backgroundPositionXおよびbackgroundPositionYはいくつかのブラウザー (特に IE と最近の Webkit) でのみサポートされる非標準のCSS プロパティです。そのため、FF や Opera では機能しません。（こちらをご覧ください。）

JQueryanimateと CSS トランジションを組み合わせると、ほとんどのブラウザで背景画像を 1 つの軸でアニメーション化できることがわかりました。別の質問 ( jQuery.animate background-position )への回答から引用します。

JQuery の.animate()andbackgroundPositionXとYIE を別々に使用します (これは最新の JQuery で動作します)。次に、 CSS トランジションをサポートするブラウザー (IE 以外のほぼすべて) で、 .css()代わりに使用.animate()して背景位置を変更し、スタイルシートで CSS トランジションを設定します。

上記でほとんどのブラウザーをカバーしますが、プラグインを使用するだけのように互換性がない場合があります。ここで動作を確認してください: http://jsfiddle.net/lucylou/dVpjh/

于 2011-11-17T22:45:37.757 に答える
0

によると： http://www.w3schools.com/css/pr_background-position.asp

"一方の値のみを指定すると、もう一方の値は 50% になります。% と位置を混在させることができます"

于 2011-06-12T14:17:18.580 に答える