addClass / removeClass / hasClass / toggleClass

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

$("#elemento").addClass("clase");

$("#elemento").toggleClass("clase");

$("#elemento").removeClass("clase");

if($("#elemento").hasClass("clase")){alert("exito")}

Ejercicios

1. animate.css

Usando addClass, hacer que al pulsar un botón este coja los estilos necesarios y suministrados por la librería animate.css para que se produzca la animación correspondiente

Para que funcione, habrá que añadir el class animated y el class correspondiente a la animación que queremos emplear y que podemos consultar en animate.css.

Si queremos que pasado un tiempo se elimine el class, usaremos la función timeOut

setTimeout( function(){
	$("#rojo").removeClass('animated bounce');
}, 2000);

Si queremos que el class se elimine cuando la animación ha concluído, usaremos:

$("#rojo").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ 
	$("#rojo").removeClass("animated bounce");
});

2. Ejercicio menú hamburguer

if($("#elemento").hasClass("clase")){...}