使用jQuery设置多个背景位置的动画

我正在为我的wordpress主题的边栏小部件创建一个切换下拉效果

h2

小部件内的标签有两个背景图像，背景位置不同

此背景的css如下所示：

background-image: url(images/h2bg.png), url(images/button.png);
background-position: center left, bottom right;
background-repeat: no-repeat,no-repeat;

我想做的是，当用户单击h2元素时，为元素框中的第一个背景（h2bg.png）设置动画，然后将第二个背景图像的位置更改为

左上

。（这是一张小小的精灵图像）

我的jQuery脚本是这样的：（你不需要经历它）

长话短说。。我注意到javascript返回

background-position-x

和

background-position-y

作为percenatges，中间带有分号

所以我在动画中使用了百分比，它对一幅背景图像效果很好。但是当涉及到多个背景时，它就不起作用了！我用分号试过了。。。没有分号和像素值，但没有运气

---

如何使用jQuery处理多个背景位置属性

只需使用

'background-position'：'value px value px'

或

'left top'

或任何适合您的工具。

只需使用

'background-position'：'value px value px'

或

'left top'

或任何适合您的工具。

您可能需要在.css/.animate方法中重新定义图像URL

'background-image' : 'url("image1.png"), url("image2.png")',
'background-position' : 'right 50px left 50px' (or whatever)

CSS使用图像url声明序列来确定哪些属性应用于哪个图像，因此这可能只是浏览器没有参考点的情况（因为样式是内联应用的，而不是在样式表中应用的）

此外，请遵守“背景位置”声明。不确定background-position-x、background-position-y是否适用于多个图像

更新

---

jQuery无法设置背景图像的动画。为了获得相同的效果，您必须在目标元素下使用堆叠的div来伪造它，并调整它们的大小。

您可能需要在.css/.animate方法中重新定义图像URL

'background-image' : 'url("image1.png"), url("image2.png")',
'background-position' : 'right 50px left 50px' (or whatever)

CSS使用图像url声明序列来确定哪些属性应用于哪个图像，因此这可能只是浏览器没有参考点的情况（因为样式是内联应用的，而不是在样式表中应用的）

此外，请遵守“背景位置”声明。不确定background-position-x、background-position-y是否适用于多个图像

更新

---

jQuery无法设置背景图像的动画。为了获得同样的效果，您必须在目标元素下使用堆叠的div来伪造它，并调整它们的大小。

删除分号会破坏整个过程，使用

backgound positiond

而不是

-x

和

-y

也不起作用。如果不设置动画，这段代码就可以完美地工作：

background position'，'-150px 0px，255px 0px

但是当我在

animate

函数中使用它时，它什么都不做。经过一点研究，jQuery似乎实际上无法访问必要的属性来允许“设置”背景图像属性。我会继续找的。错。jquery可以为一个背景图像的位置设置动画！示例：

$（'#元素'）。动画（{'background-position-x'：'+=400px'}，400）我不知道如何在同一元素上设置两个背景图像的动画…删除分号会破坏整个过程，使用
backgournd positiond
而不是
-x
和
-y
也不起作用。如果不设置动画，这段代码就可以完美地工作：
background position'，'-150px 0px，255px 0px
但是当我在
animate
函数中使用它时，它什么都不做。经过一点研究，jQuery似乎实际上无法访问必要的属性来允许“设置”背景图像属性。我会继续找的。错。jquery可以为一个背景图像的位置设置动画！示例：
$（'#元素'）。动画（{'background-position-x'：'+=400px'}，400）我不知道如何在同一元素上设置两个背景图像的动画…你能给出一个如何使用这些属性的示例吗？这将帮助那些不太熟悉jQuery的人。你能举一个如何使用这些属性的例子吗？它将帮助那些不太熟悉jQuery的人。