如何淡入jQuery中的背景图像的背景位置更改？

我正在使用一个巨大的精灵来改变悬停时不同状态的元素。我想知道是否有办法让悬停状态图像淡入？您可以查看我的代码直播 - here 如何淡入jQuery中的背景图像的背景位置更改？

这是我针对每个跨度

$(".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因为我有多个需要重置的悬停。

感谢您的任何帮助。

来源

2010-10-27 raeq

使用这样的事情：

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

冲洗和重复其他三个。

来源

2010-10-27 04:39:26 Chetan

然而，这会将背景滑动到其新位置而不是褪色;如果背景实际上是精灵表，那么这可能不是所期望的效果。 – tdammers 2010-10-27 04:41:15

@tdammers：啊，那是真的。没关系，这不是正确的答案。 – Chetan 2010-10-27 04:43:12

您需要双叠叠背景并淡入到另一个。在同一个容器内将无法褪色。

来源

2010-10-27 04:41:08 babtek

或者你可以只使用jquery的本地淡入API。

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

来源

2010-10-27 04:43:27 tr4656

如何淡入jQuery中的背景图像的背景位置更改？

回答

相关问题