在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手动设置动画(定期设置背景位置，线性插值不是很难做到)