如何定位当前页面的 nav 元素并使用 jQuery 淡出其 css“当前”类？答案

【问题标题】：How to target the current page's nav element and fade out its css "current" class with jQuery?如何定位当前页面的 nav 元素并使用 jQuery 淡出其 css“当前”类？
【发布时间】：2012-12-15 09:00:51
【问题描述】：

我有一个简单的导航栏。正如您所期望的，与当前页面对应的链接上有一个简单的 CSS 类，称为“current”。所有链接都有一个很好的悬停过渡效果，“ease-in-out”属性持续 0.3 秒。问题是，当用户点击导航栏上的不同链接时，他不会看到缓出效果，因为页面会立即切换。我知道我可以使用 setTimeout() 函数通过 jQuery 延迟页面切换，但我不太明白如何在链接元素上定位“当前”类并告诉浏览器慢慢淡出“当前”CSS在切换到下一页之前上课。

这有意义吗？当前 HTML：

<nav>
<ul>
<li><a href="#" class="current">About</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

超级简单的导航，当前页面有一个 CSS 类 hover 类，在基本链接样式之后定义为：

nav ul li a, nav ul li a:link, nav ul li a:visited{
    font-family: Arial, Verdana, sans-serif;
    text-decoration: none;
    color: rgba(0,0,0,1);
    font-size: 2.4em;
    padding: 5px 10px;
    margin: 0px 15px;
   -webkit-text-shadow: 1px 1px 1px rgba(255,255,255,1);
   -moz-text-shadow: 1px 1px 1px rgba(255,255,255,1);
   text-shadow: 1px 1px 1px rgba(255,255,255,1);
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

nav ul li a:hover, nav ul li a:active, nav ul li a.current{
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,1);
    text-decoration: none;
    -moz-border-radius: 140px;
    -webkit-border-radius: 140px;
    border-radius: 140px;
    -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    -moz-text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

无论如何，我都在使用 jQuery 来处理网站中的其他内容，因此 jQuery 的答案是完全可以接受的。我希望我对我的问题足够清楚。基本上，当用户单击不同的导航链接时，我不希望用户突然切换页面。我希望“当前”CSS 类在浏览器转到新页面之前淡出 0.3 秒。我知道我对 CSS“当前”类和链接悬停状态应用了相同的样式，如果这是代码工作所需要的，我可以更改它。

提前感谢任何提供帮助的人。感谢任何建议/建议/提示。

【问题讨论】：

我建议不要这样做。不要让您的网站响应速度低于显示动画所需的响应速度。你不能在悬停时制作动画吗？
@Chris：是的，我可以，但这是针对投资组合网站的，它有点艺术；突然的页面转换严重破坏了用户体验，因为页面上的其他一些元素保持静止，而另一些则淡出。我真的不认为 0.3 秒的延迟会降低它的响应速度。

标签： jquery css hover fade nav

【解决方案1】：

您不能淡出课程本身。您可以创建一个通过添加或删除一个类来触发的 CSS3 过渡，并将创建所需的动画、淡入淡出或其他任何内容。

因此，例如，您可以为 opacity 属性设置 CSS3 过渡。 CSS 中的.current 类可以指定opacity: 1，默认CSS 条件（当没有.current 类时）可以是opacity: 0;。然后，当您从对象中删除 current 类时，该项目将逐渐淡出到 0 不透明度。

或者，您可以拥有一个 fadeOut 类，该类具有 opacity: 0 CSS 规则，并在对象上设置了 opacity 的 CSS 过渡，您只需将 fadeOut 类添加到对象即可。

听起来您已经知道，如果链接点击会改变页面，那么您必须使用setTimeout() 延迟链接href 的处理，以便能够看到淡入淡出过渡和可能会阻止链接的默认处理。

【讨论】：