Os pongo en situación, tengo un div con una imagen de un perro, al hacer click sobre él, se reproduce su sonido y el div se hace mas pequeño y más grande con la clase pequenio que contiene esa animacion.
El problema es que al acabar esa animación se descuadra la imagen de su posicion inicial, por lo que estoy intentando quitar la clase pequenio y dejarla como estaba por defecto. He buscado en internet y he encontrado esta forma pero no funciona, ¿alguna solución? Gracias de antemano.
function playPerro(){
document.getElementById("audiocerdo").pause();
document.getElementById("audiovaca").pause();
document.getElementById("audiogato").pause();
document.getElementById("audioperro").play();
document.getElementById("perro").className="animal pequenio";
var claseAnimacion = document.getElementsByClassName("animal pequenio");
function myPause() {
document.getElementById("audioperro").pause();
claseAnimacion.classList.remove("pequenio");
}
setInterval(myPause, 5000);
}
getElementsByClass
te regresa un arreglo de nodos, si el elemento al que quieres acceder es el que tiene como id = perro, accede a el así para quitarle la clasedocument.getElementById('perro').classList.remove('pequenio');
div
tiene unid
, lo más fácil sería hacer esto:var divPerro = document.getElementById('idDeTuDiv'); divPerro.classList.remove('pequenio');
El problema aquí sería queclassList
no es soportado por todas las versiones de navegadores. Ver aquí para la compatibilidad.