如何淡化jquery中背景图像的背景位置变化？

Question

我正在使用一个巨型精灵来替换在悬停时改变不同状态的元素。我想知道是否有办法让悬停状态图像淡入？您可以实时查看我的代码 - 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因为我有多个需要重置的悬停。

感谢您的帮助。

Answer 1

使用类似的东西：

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

冲洗并重复其他三个。

Answer 2

您需要对背景进行双重叠加，然后逐渐淡出。将无法在同一容器内褪色。

Answer 3

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

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