动画在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插件。

-OR -

取决于用例，使用CSS3动画而不是jQuery。

- 或 -

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