Javascript 如何使用jQuery设置背景图像动画

大家好，我正在尝试使用jQuery设置背景图像的动画，我尝试了以下操作，但是我的测试页面没有成功，我看到了蓝色的Facebook图标，但在鼠标上方它不会向上显示灰色的徽标。请帮忙！谢谢，我是jquerynoob

我的测试页面：

Facebook图标应向上显示动画，完整图像如下：

我的CSS

HTML（添加了空的div框以便单击某些内容）

谢天谢地，这个非常简单。您正在为锚点上的背景位置设置动画，但实际图像位于li上

只需在JavaScript中更改选择器：

 $('#facebook_icon li')

但是，我建议更改标记（以及附带的CSS），使

a

位于

li

中，而不是

ul

的子项。这样，您的标记是有效的

更新：

嘿，所以我完全同意使用CSS3。这正是我将如何实现的。但为了解决这个问题：要让

bgpos

插件与jQuery 1.8.2一起工作，请将

backgroundPosition

方法的前两行更改为：

 if (fx.start === 0 && typeof fx.end == 'string') {
    var start = $.css(fx.elem,'backgroundPosition');

---

谢天谢地，这个很简单。您正在为锚点上的背景位置设置动画，但实际图像位于li上

只需在JavaScript中更改选择器：

 $('#facebook_icon li')

但是，我建议更改标记（以及附带的CSS），使

a

位于

li

中，而不是

ul

的子项。这样，您的标记是有效的

更新：

嘿，所以我完全同意使用CSS3。这正是我将如何实现的。但为了解决这个问题：要让

bgpos

插件与jQuery 1.8.2一起工作，请将

backgroundPosition

方法的前两行更改为：

 if (fx.start === 0 && typeof fx.end == 'string') {
    var start = $.css(fx.elem,'backgroundPosition');

---

一个简单的解决方案应该是使用css3转换。 您可以这样做：

在CSS中

#facebook_icon li{
    -moz-transition: background-position 1s;
    -webkit-transition: background-position 1s;
    -o-transition: background-position 1s;
    transition: background-position 1s;
    background-position: 0 0;
}

#facebook_icon li:hover{
     background-position: 0 -119px;
}

---

一个简单的解决方案应该是使用css3转换。 您可以这样做：

在CSS中

#facebook_icon li{
    -moz-transition: background-position 1s;
    -webkit-transition: background-position 1s;
    -o-transition: background-position 1s;
    transition: background-position 1s;
    background-position: 0 0;
}

#facebook_icon li:hover{
     background-position: 0 -119px;
}

---

---

您也可以使用CSS3转换。为什么您的li在a中？反过来看。你的

锚中有一个
li
。你试过mouseenter（）和mouseleave（）吗？首先，你不需要
{duration:500}
。你可以通过500。您也可以使用CSS3转换。为什么您的li在a中？反过来看。你的
锚中有一个
li
。你试过mouseenter（）和mouseleave（）吗？首先，你不需要
{duration:500}
。你可以通过500。谢谢，我更新了代码，还包括了作者使用的jquery.bgpos.js。。。但是仍然没有起作用。我还将A标记移到了li中，现在我失去了悬停状态。我不想在li里面有任何文字，也许我应该把图像放在li里面？也许CSS 3方式会更好here@Leon作者的插件不适用于最新的jQuery。我把版本放回1.4.2，它就开始了working@Leon可以使用悬停状态执行以下两种操作之一。理想情况下，您可以为
a
指定宽度和高度，并显示
块
或
内联块
，以保持标记有效，但也可以使其按预期工作。不太好的选择是在CSS中的
li
上设置
cursor:pointer
。啊，谢谢，忘了标记和显示块的宽度和高度了！谢谢，我更新了代码，还包括了作者使用的jquery.bgpos.js。。。但是仍然没有起作用。我还将A标记移到了li中，现在我失去了悬停状态。我不想在li里面有任何文字，也许我应该把图像放在li里面？也许CSS 3方式会更好here@Leon作者的插件不适用于最新的jQuery。我把版本放回1.4.2，它就开始了working@Leon可以使用悬停状态执行以下两种操作之一。理想情况下，您可以为
a
指定宽度和高度，并显示
块
或
内联块
，以保持标记有效，但也可以使其按预期工作。不太好的选择是在CSS中的
li
上设置
cursor:pointer
。啊，谢谢，忘了标记和显示块的宽度和高度了！呜，是的，这太简单了。。。我喜欢CSS3:）我以前用它来设置不透明度的动画。。。我想我会把jQuery保存起来，让它变得更复杂一点Woot是的，这太简单了。。。我喜欢CSS3:）我以前用它来设置不透明度的动画。。。我想我会将jQuery保存为更复杂的东西
 if (fx.start === 0 && typeof fx.end == 'string') {
    var start = $.css(fx.elem,'backgroundPosition');

#facebook_icon li{
    -moz-transition: background-position 1s;
    -webkit-transition: background-position 1s;
    -o-transition: background-position 1s;
    transition: background-position 1s;
    background-position: 0 0;
}

#facebook_icon li:hover{
     background-position: 0 -119px;
}