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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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