要素の外側から内側にアニメーション背景

Question

要素の外側から内側に背景画像をアニメーション化する際に問題があります。

次のコードのように長い画像が要素の境界内に常にあるようChromeで動作します。

<script type="text/javascript"> 
$(document).ready(function() { 

    $('.title').css({backgroundPosition: '100% 100px'}).animate({ 
      'background-position-x': '100%', 
      'background-position-y': '50%' 
     }, 1000, 'linear'); 
}); 
</script> 

<style type="text/css"> 
.title { 
    width: 100%; 
    height: 400px; 
    background: rgba(0,0,0,0.6) url(https://www.google.co.uk/images/srpr/logo3w.png) no-repeat; 
} 
</style> 

<div class="title"></div>​ 

...画像は、要素の境界の外で開始した場合しかし、それは程度とdoesnのジャンプ期待どおりに動作しません。

HERE IS A JSFIDDLE

上記のコードでは、私は、私が発見していない私のコードといくつかの根本的な誤りがなければならないと思いFFで全く動作しません。

ご協力いただければ幸いです。ここ

Answer 1

あなたの問題はbackground-position-xとbackground-position-yのFirefoxの故意の無知である - あなたの代わりにあなたのコード内でbackground-positionを使用する必要がありますが、そのようなグループ化されたプロパティに、あなたがすることはできませんanimate()。私が考えることができる唯一の解決策は、お互いの上に積み重ねられた2つのDIV要素を使用することです。