jQuery用x和y位置动画背景位置[重复]

Posted 2023-05-08

【中文标题】jQuery用x和y位置动画背景位置[重复]

【英文标题】：jQuery animate background position with x and y position [duplicate]

【发布时间】：2012-09-14 01:51:06

【问题描述】：

可能重复：jquery animate background position

对于动画悬停效果，我尝试在 jQuery 的 animate 函数中设置背景位置。我将悬停设置在精灵图像中，当我尝试在函数 animate 中设置背景位置时，它似乎只使用一个像素参数。当我尝试设置两个（x 和 y）时，它根本不起作用。

什么有效（它在我的源代码中设置 109px 50%）：

$('a#twitter').animate( 
backgroundPosition: '109px',
);

我想要但不起作用（我的源代码中没有）：

$('a#twitter').animate( 
backgroundPosition: '109px 0px',
);

提前致谢。

尼基

【参考方案1】：

试试这个：

$('a#twitter').animate( 
   background-position-x: '109px',
   background-position-y: '0'
);

【讨论】：

有效！我也只需要在属性名称周围加上单引号！谢谢！

这在 FireFox 中不起作用。由于 FF 不再支持background-position-x。

正如 Siddharth 所说，这在 FF 或 Opera 中不受支持，因为 background-position-x,y 不是规范。