將元素外部的背景位置動畫到裏面

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>​ 

...但是，如果圖像開始元素之外界定它跳到約而沒有按沒有按預期工作。

HERE IS A JSFIDDLE

上面的代碼不FF在所有的工作，所以我想一定是我的代碼一些基本的錯誤，我沒有發現。

任何幫助將不勝感激。

Answer 1

你這裏的問題是Firefox的的background-position-x和background-position-y故意無知 - 你必須使用你的代碼，而不是background-position，但你不能animate()上那樣的分組屬性。我能想到的唯一解決方案是使用兩個堆疊在一起的DIV元素。