【问题标题】：Animate two background in a div为 div 中的两个背景设置动画
【发布时间】：2012-10-30 14:01:40
【问题描述】：

您好，我有一个具有两个背景的 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 中的背景

【问题讨论】：

什么是“它不起作用”？您在浏览器控制台中收到任何错误吗？检查它...请
firebug没有错误，它不动，很奇怪
我不会为background-position 设置动画，而是使用所需背景为一些内部div 的top 和left 设置动画。更容易，并且保证工作。
否，因为位置是动态的，没有顶部/左侧或底部的动画。
定位absolute。也就是包含背景图片的内部 div 的位置。

标签： jquery

【解决方案1】：

为什么？

http://api.jquery.com/animate/ 声明：

所有动画属性都应该动画成一个单个数字价值

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

那怎么办？

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

-或-

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

-或-

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

【讨论】：