jquery - 如何定位当前页面的导航元素并使用 jQuery 淡出其 css "current"类？

Question

我有一个简单的导航栏。如您所料，对应于当前页面的链接有一个名为“current”的简单 CSS 类。所有链接都有一个很好的悬停过渡效果，“缓入缓出”属性持续 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>

super 简单的导航，当前页面有一个 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“当前”类和链接悬停状态应用了相同的样式，如果代码需要这样做，我可以更改它。

提前感谢任何提供帮助的人。任何建议/建议/提示都将受到赞赏。

Answer 1

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

因此，例如，您可以为 opacity 属性设置 CSS3 过渡。 CSS 中的 .current 类可以指定 opacity: 1 并且默认的 CSS 条件(当没有 .current 类时)可以是不透明度:0；。然后，当您从对象中删除 current 类时，该元素将逐渐淡化为 0 不透明度。

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

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