Intento establecer un efecto de FadeOut al pulsar sobre un enlace. Sin embargo, cuando pulso sobre una etiqueta "a" con href definido el FadeOut no funciona. Si no tiene enlace definido (href = '#') si funciona. ¿Cómo puedo solucionarlo?
<pre>
<div id = "menu">
<article id="nombrePerfil" ><a href="/home"></a></article>
<section id="navegacion">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/sobremi">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" >Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href = "/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href = "#">Contact</a>
</li>
</ul>
</section>
</pre>
El código Jquery que estoy utilizando es:
$(document).ready(function(){
$("a.nav-link").click(function(){
$("html").fadeOut(500);
});
});