右から左に背景画像を含むdivをアニメーション化する

Question

私は、画像の特定の部分を明らかにするだけで、基本的にその背景画像のマスクとして機能するdivを持っています。

背景イメージは右に揃えられます。しかし、私はbackgroundPositionを右から左にアニメーションしようとしていますが、アニメーションは自動的にバックグラウンドの位置を左に（または非常に近く左に - 私は位置がどこから来ているのか分かりません）リセットします。

これを解決する方法はありますか？

例コード：http://jsfiddle.net/QRkLr/ （アニメーションが起動したとき、背景画像が完全に右に揃っていないことに注意してください）。

Answer 1

マスクの最初のX位置は、「右」ではなく数字でなければなりません。私が間違っていない場合は、左からbackground-positionに割り当てられた数値（パーセントまたはピクセル）が計算されます。

だから私の修正は次のとおりです（左）background-position: top right;が、その後、アニメーションの前に、左から必要な初期X位置を計算して、0に戻ってアニメーション化：CSSを保つ

$("#image").css({backgroundPositionX: -large_left_border}) 
    .animate({backgroundPositionX: 0}, 1500); 

を参照してくださいfiddle

EDITは

が

ボトムラインは：background-position-xは、Firefoxでサポートされていない、と.animate()は数字のみCSSプロパティ上で動作します（それは、Dそれは単一の数字ではないのでbackground-positionで動作しません）、これを達成するための標準のjquery方法はありません。 @thirtydotはhereを指摘するように

しかし、background-position上のアニメーションを実装したプラグインがあります：http://www.protofunc.com/scripts/jquery/backgroundPosition/