使用jQuery和精靈

我正在尋找一種方法來使用jquery來動畫我的精靈。當我懸停在圖像上時，它會淡入。然後當我懸停時。它淡出。使用jQuery和精靈

CSS：

nav ul { position: relative; z-index: 1000; margin: -26px 0 0 11px; overflow: hidden; } 
nav ul li { display: inline; } 
nav ul li a { background: url(../images/nav-sprite.png); display: block; float: left; text-indent: -999px; margin: 0 auto; width: 667px; } 
nav ul a#nav-1 { background-position: 0 0; height: 48px; width: 103px; } 
nav ul a#nav-2 { background-position: -103px 0; height: 48px; width: 129px; } 
nav ul a#nav-3 { background-position: -234px 0; height: 48px; width: 156px; } 
nav ul a#nav-4 { background-position: -392px 0; height: 48px; width: 147px; } 
nav ul a#nav-5 { background-position: -541px 0; height: 48px; width: 124px; } 
nav ul a#nav-1:hover { background-position: 0 48px; } 
nav ul a#nav-2:hover { background-position: -103px 48px; } 
nav ul a#nav-3:hover { background-position: -234px 48px; } 
nav ul a#nav-4:hover { background-position: -392px 48px; } 
nav ul a#nav-5:hover { background-position: -541px 48px; }

來源

2010-10-10 omnix

問題是...？ – Frankie 2010-10-10 02:16:54

對不起。我如何讓懸停精靈有淡入淡出效果？ – omnix 2010-10-10 02:44:56

不直接相關，但這裏有一個有趣的jQuery sprites實現==> http://stackoverflow.com/questions/3851896/rotate-sprite-javascript/3852360#3852360 – 2010-10-10 03:09:32

沒有什麼特定的精靈在這個問題上。您始終可以使用常規方法，將hover事件與fadeTo函數相結合，以獲取所需的不透明度動畫。

$("nav ul a").hover(function(){ 
    $(this).stop().fadeTo(300, 1); 
}, function(){ 
    $(this).stop().fadeTo(300, 0.4); 
}).fadeTo(0, 0.4);

如果你需要，你還可以添加CSS回退：

nav ul a { 
    opacity: 0.4; 
} 

nav ul a:hover { 
    opacity: 1; 
}

親身體驗這裏的工作：http://www.jsfiddle.net/yijiang/CNC6W/

嗯，這是簡單的修復 - 嘗試添加一個ul元素的背景，然後給它一個border-radius以確保圓角保持不變。

nav ul { 
    background: #000; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px; /* Not sure about the actual radius 
          you're using - these are guesses */ 
}

您可能還需要從0.4提高起點不透明度的東西更高，持續時間的東西比從CSS技巧300

來源

2010-10-10 02:45:01

真的很好！但整個導航欄現在都是透明的，我只需要懸停效果就可以了。繼承人網站即時通訊atm工作。 http://elektrikhost.com/ – omnix 2010-10-10 02:56:50

@Kawohi在那裏，看看這是否適合你 – 2010-10-10 03:04:06

但整個導航是一個圖像... – omnix 2010-10-10 03:08:38

退房this屏幕鑄鋼的低。它涉及動畫CSS精靈。

來源

2010-10-10 02:51:26 nathan

是的，但動畫與精靈毫無關係。 – omnix 2010-10-10 02:58:49

使用jQuery和精靈

回答

相關問題