Buenos dias!
Tengo una duda que me gustaría saciar, ya que mi imaginación ahora mismo sobrepasa mis conocimientos (aclaro, estoy empezando, no me deis muy duro, pero dadme caña :)).
Resulta que estoy realizando una serie de cambios en www.jardineriatudor.es/2.0 y, empezando por los cambios visuales, he realizado al menu principal una animación fadeInDown bastante chula, el código que he utilizado viene del famoso animate.css y en el index quedó asi:
Código HTML:
<nav id="menu" class="animated fadeInLeft delay-01">
<a href="#" class="nav-mobile" id="nav-mobile"></a>
<ul>
<li class="current hvr-float-shadow click"> <a class="animated fadeInDown delay-02s" href="index.html">Inicio</a> </li>
<li class="hvr-float-shadow transform"> <a class="animated fadeInDown delay-04s" href="quienes.html">Quienes Somos</a> </li>
<li class="hvr-float-shadow"> <a class="animated fadeInDown delay-06s" href="servicios.html">Servicios</a> </li>
<li class="hvr-float-shadow"> <a class="animated fadeInDown delay-08s" href="trabajos.html">Trabajos Realizados</a> </li>
<li class="hvr-float-shadow"> <a class="animated fadeInDown delay-1s" href="contact.html">Contáctanos</a> </li>
</ul>
</nav> La animación queda chulísima, pero se me metió en la cabeza que me gustaría que, al hacer click en cualquiera de los href, la animación fuera en sentido contrario (desaparecieran los iconos "rebobinando" la animación) y luego cargara el link.
Lo único que he conseguido es hacer que la web espere antes de cargar la página con un pequeño timer en JS:
Código HTML:
<script>
$('#timerLinkIndex').click (function (e) {
e.preventDefault();
setTimeout(function () {
window.location.href = "http://www.mobitex.es";
}, 1000); //will call the function after 2 secs.
});
</script> obviamente esto ni revierte ni nada, espera el tiempo en ms que le pongas y listo. Así que lanzo de nuevo mi pregunta:
Mientras el server espera este tiempo para cargar el href ¿Es posible crear un evento onClick en CSS (Quizá con target) para revertir la animacion y hacer que "desaparezcan los iconos" para que luego "reaparezcan" con la animación de nuevo en la pagina destino?
Mil gracias por vuestra ayuda!