如何在jQuery中设置背景属性的动画？

Question

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

有没有一种方法或等效的方法来实现这一目标？

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

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

Answer 1

您无法设置url属性的动画，但请确保可以设置背景位置的动画，如下所示：

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

jsfiddle示例

如果您还想过渡到另一张图片，建议您使用2个div，尺寸和位置均为100％：绝对，这样您就可以为其left：和top：属性设置动画，还可以为其不透明度设置动画以融合到另一张图片。