Estoy tratando de lograr una animación de clic en una etiqueta <a> . Hay varias etiquetas <a> y todas tienen la misma clase.
¿Cómo logro esto?
Como alternativa, intenté agregar una clase como temporal al elemento objetivo usando $(this).addClass('temp')
Necesito saber si hay una mejor manera de hacerlo.
Si utilizo el método anterior, no podré traer animaciones con retrasos.
Muestra
<script> $("a").click(function(){ anime({ targets:'a', opacity:[0,1], }) }); </script>Simplemente puede pasar e.currentTarget a la propiedad de targets (que acepta un nodo DOM ), de modo que apunte al elemento <a> actual al que está vinculado el detector de eventos. Alternativamente, también puede pasar this : depende de usted.
Consulte la prueba de concepto a continuación. He ajustado la opacidad a 0,25 para que puedas ver el elemento antes de hacer clic en él.
$("a").click(function(e) { e.preventDefault(); anime({ targets: e.currentTarget, opacity: [0.25, 1], }) }); a { opacity: 0.25; } <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#">Click me</a> <a href="#">Click me</a> <a href="#">Click me</a> <a href="#">Click me</a> <a href="#">Click me</a>O simplemente hazlo de forma nativa en JS sin necesidad de jQuery:
document.querySelectorAll('a').forEach(el => { el.addEventListener('click', e => { e.preventDefault(); anime({ targets: el, opacity: [0.25, 1], }); }); }); a { opacity: 0.25; } <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#">Click me</a> <a href="#">Click me</a> <a href="#">Click me</a> <a href="#">Click me</a> <a href="#">Click me</a>