jquery - 如何在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 个 100% 大小和位置的 div：absolute，这样您就可以为它们的 left: 和 top: 属性设置动画，并为它们的不透明度设置动画以混合到另一个图像。