如何淡入jquery中背景图像的背景位置更改？答案

【问题标题】：How To Fade In A background-position change for a background image in jquery?如何淡入jquery中背景图像的背景位置更改？
【发布时间】：2010-10-27 04:31:52
【问题描述】：

我正在为一个元素使用一个巨大的精灵，它在悬停时会改变不同的状态。我想知道是否有办法让悬停状态图像淡入？您可以实时查看我的代码 - here

这是我的每个跨度悬停状态的代码

$(".hf-1").hover(
        function () {
                $(this).css("background-position","0 -121px");
                $(".hf-2").css("background-position","0 -242px");
                $(".hf-3").css("background-position","0 -363px");
                $(".hf-4").css("background-position","0 -484px");
              },
        function () {}

);

我使用 Jquery 来做背景图像悬停而不是基本的 css，因为我有多个悬停需要重置。

感谢您的帮助。

【问题讨论】：

标签： javascript jquery css wordpress fadein

【解决方案1】：

使用这样的东西：

$(this).animate({"background-position": "0 -121px"}, "slow");

冲洗并重复其他三个。

【讨论】：

然而，这会将背景滑动到新位置而不是淡出；如果背景实际上是一个精灵表，那么这可能不是我们想要的效果。
@tdammers：啊，那是真的。没关系，这不是正确的答案。

【解决方案2】：

您需要将背景重叠并从另一个淡入淡出。不能在同一个容器内淡出。

【讨论】：

【解决方案3】：

或者你可以只使用jquery 的原生fadeIn API。

 $(this).click(function () {
            $("this").fadeIn("slow");
          });

【讨论】：