如何在精灵导航中使用 jQuery 添加淡入淡出效果

Question

我有一个用精灵制作的导航。它几乎是完美的，除了客户想要悬停打开和悬停关闭效果之外。我使用 :hover 来实现这一点，但他也希望对精灵有淡入淡出效果。

这是我当前正在处理的网站。

我尝试了这一点：

  $("nav ul a").hover(function(){
  $(this).stop().fadeTo(300, 0.9);
}, function(){
    $(this).stop().fadeTo(300, 0.1);
}).fadeTo(0, 0.7);

但这使得整个导航透明。那不是我真正想要的。我确实在导航下方添加了深色背景，但看起来仍然不正确。我想不出还有其他方法可以做到这一点。

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; }

所以现在的默认导航不能具有透明的外观。它需要是正常的。但是当我将鼠标悬停在按钮上时，我希望悬停效果淡入和淡出......可以这样做吗？

Answer 1

无法使用精灵实现淡入淡出效果，您必须在 html 中使用图像并使用另一个图像作为背景，因此您只能更改 html 图像的不透明度。

Answer 2

听起来您想要的是在淡出后不使其透明，在这种情况下，您应该更改鼠标离开淡入淡出时的不透明度，目前您将其设置为 0.1 或 10%不透明度，但您以 70% 的不透明度开始，所以您似乎希望它回到 70%，如下所示：

$("nav ul a").hover(function(){
  $(this).stop().fadeTo(300, 0.9);
}, function(){
  $(this).stop().fadeTo(300, 0.7); //<--change this to 0.7
}).fadeTo(0, 0.7);

您可以在这里测试。