2

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

1 respuesta 1

2
$(document).ready(function(){
  
  $("a.nav-link").click(function(e){
    e.preventDefault();

    $("html").fadeOut(500, function() {
      location.href = '/enlace_a_donde_quieres_ir';
    });
  });

});

Le quitas el evento a y primero efectúas la animación y luego con el JavaScript usas la propiedad de location que es href y le das el enlace al que quieres ir.

1

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.