jquery - 为 div 中的两个背景设置动画

Question

嗨，我有一个 div 有两个这样的背景：

<div class="colCenter" style="height: 750px; top: -25px; width: 72%; left: 18%; background-image: url('img/sfondi/portfolio.jpg'), url('img/sfondi/servizi.jpg');background-position: 0px 0px, 0px -1440px;">
</div> 

如果点击后我尝试动画它不起作用为什么？这是我的代码：

$(".colCenter").on("click", function() {
    $(".colCenter").animate({
          'backgroundPositionY': '1440px 0px'
    }, 1500, 'linear');
});

在动画中我已经尝试过：'background-position': '0 1440px, 0 0px'和'backgroundPositionY': '1440px, 0px'

我在 Firefox16 中工作，并且支持的不仅仅是 div 中的背景

Answer 1

为什么？

http://api.jquery.com/animate/指出：

所有动画属性都应动画为单个数值

多个背景需要多个数值。jQuery 不“理解”您请求的动画。

那么，怎么做？

搜索一个解释你想要做的动画的 jquery 插件。

-或者-

根据用例，使用 CSS3 动画而不是 jQuery。

-或者-

使用 javascript 手动设置动画（定期设置背景位置，线性插值并不难）