使用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和精灵

回答

相关问题