Estoy aprendiendo html y css y quiero usar esta biblioteca: https://animate.style/
tengo este codigo
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head>https://codepen.io/wmfznuiy-the-looper/pen/jOaMXXg
NUESTROS SERVICIOS
Quiero que el efecto funcione al hacer clic. Usé este código pero no funcionó.
$("#hola").click(function() { $('.animate__animated .animate__bounce-active').toggleClass('.animate__animated .animate__bounce-active'); });He leído muchas publicaciones y he seguido lo que dicen, pero no funciona. Soy nuevo, por favor ayuda. Gracias
Si abre la consola en su CodePen , es posible que vea este tipo de error:
ReferenceError: $ no está definido
Esto significa que está utilizando el script de jQuery sin importarlos. Puede importarlo ya sea en la configuración de CodePen o importarlo manualmente desde el CDN de jQuery .
En lugar de esto, que es encontrar el elemento que tiene la clase .animate__animated .animate__bounce-active toggle agregarles la clase.
$('#hola').click(function () { $('.animate__animated .animate__bounce-active').toggleClass( '.animate__animated .animate__bounce-active' ); }); Cambie a esto, que agrega la clase a #hola cada vez que se hace clic y elimina esa clase después de un segundo:
$('#hola').click(function () { $(this).addClass('animate__animated animate__bounce'); setTimeout(() => { $(this).removeClass('animate__animated animate__bounce'); }, 1000); }); Este es el elemento al que te diriges. Después de intentar varias veces y encontrar la mejor solución, creo que animate.style no es compatible con la animación de la etiqueta de anclaje. Pero funciona con <h1> y los demás. (Corrígeme si me equivoco o me perdí algo)
<a id="hola" class="nav-link" href="#nuestros_servicios">NUESTROS SERVICIOS</a> P/s: Este resultado está usando <h1> en lugar de la etiqueta <a> .
$('#hola').click(function () { $(this).addClass('animate__animated animate__bounce'); setTimeout(() => { $(this).removeClass('animate__animated animate__bounce'); }, 1000); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> <h1 id="hola" class="nav-link">NUESTROS SERVICIOS</h1>Wow, muchas gracias, estoy muy feliz y no pensé que nadie quisiera ayudarme porque es mi primera publicación, ya lo había intentado un millón de veces y la razón por la que todos los otros códigos no funcionaron fue por qué Usted dijo. Estaba usando la etiqueta de anclaje. Animate.style tiene documentación y dicen que la mejor manera de hacer lo que quería era usar esto
const animateCSS = (element, animation, prefix = 'animate__') => // We create a Promise and return it new Promise((resolve, reject) => { const animationName = `${prefix}${animation}`; const node = document.querySelector(element); node.classList.add(`${prefix}animated`, animationName); // When the animation ends, we clean the classes and resolve the Promise function handleAnimationEnd(event) { event.stopPropagation(); node.classList.remove(`${prefix}animated`, animationName); resolve('Animation ended'); } node.addEventListener('animationend', handleAnimationEnd, {once: true}); });pero nunca mencionaron que esto no iba a funcionar con la etiqueta de anclaje y por eso no funcionaba. Muchas gracias. Probé su solución y su solución y ambas funcionan, pero sí, tuve que cambiarla por H1. Ojalá pudiera usarlo con la etiqueta de anclaje, pero supongo que es así. Gracias