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

Posted 2023-05-08

【中文标题】如何在jQuery中为背景属性设置动画？

【英文标题】：How to animate background property in 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 属性和位置设置动画。

【参考方案1】：

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

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

Example jsfiddle

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

【讨论】：

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