如何使用jQuery爲背景位置設置動畫效果？

Question

我一直在試圖動畫背景位置從一個div移動。該div有背景，有這樣的事情：

<div class="uppermenu" style="background-position: 0px -80px;"></div> 

所以，它工作正常，當我作出了mouseenter我想改變背景位置動畫這使得它像背景位置：0像素0像素，但它不起作用......我可以改變顏色和所有，但我不能移動背景。有沒有辦法做到這一點？

我已經試過這樣：

jQuery(this).children(".uppermenu").animate({"background-position": "0 85px"}, "slow"); 

而且也是這樣：

jQuery(this).children(".uppermenu").animate({ 
    'background-position-y': '45px', 
    'background-position-x': '0px' 
}, 100, 'linear'); 

他們都沒有改變我的立場。哪裏不對？

Answer 1

的動畫背景位置的語法是：

.animate({backgroundPosition:"(-20px 94px)"}); 

您也可以使用這個插件在http://archive.plugins.jquery.com/project/backgroundPosition-Effect