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

【问题标题】：How to put in fade effect with jQuery in sprite Navigation如何在精灵导航中使用jQuery添加淡入淡出效果
【发布时间】：2010-10-11 04:43:15
【问题描述】：

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

Here is the site I am currently working on.

我试过这个：

  $("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; }

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

【问题讨论】：

这和你之前的问题很接近了吧？
是的，我很抱歉，但我无法得到正确的答案......我需要尽快找到方法......
那么，您应该对上一个问题的答案发表评论，并可能澄清问题，而不是创建一个新问题...

标签： jquery css jquery-animate

【解决方案1】：

精灵没有淡化效果，你必须在你的 html 中使用一个图像，另一个作为背景，所以你只能改变 html 图像的不透明度。

【讨论】：

那么绝对没有办法做到这一点？

【解决方案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);

You can test it here.

【讨论】：