如何在jQuery中为背景属性设置动画？答案

【问题标题】：How to animate background property in jQuery?如何在jQuery中为背景属性设置动画？
【发布时间】：2013-09-10 09:24:41
【问题描述】：

我正在通过背景属性使用 CSS 精灵，但我无法在 jQuery 中对其进行动画处理。

有没有办法或等效的方法来实现这一点？

$(function(){
    $(".webdesign").mouseover(function(){
        $(".webdesign").animate({
        background: "url("../images/category-hover.png") 0 0"
        });
    });
});

我正在为 url 属性和位置设置动画。

【问题讨论】：

您要为哪个属性设置动画？图片的url()还是位置？
我正在为 url 属性和位置设置动画。

标签： jquery image background jquery-animate sprite

【解决方案1】：

您不能为 url 属性设置动画，但请确保您可以像这样为背景位置设置动画：

$("body").animate({"background-position-y": "200px"}, "slow");

Example jsfiddle

如果您还想过渡到另一张图片，我建议您使用 2 个 100% 大小和位置的 div：绝对，这样您就可以为它们的 left: 和 top: 属性设置动画，并将它们的不透明度设置为混合到另一个图像。

【讨论】：

谢谢，我会这样尝试。 :)