如何淡入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中的背景圖像的背景位置更改？

回答

相關問題