En este artículo, aprenderemos a animar usando las funciones jQuery addClass() y removeClass() .
Vamos a usar jQuery y jQuery UI. jQuery UI (interfaz de usuario) es un software gratuito y de código abierto que se basa en la potente biblioteca principal de jQuery. Si desea utilizar jQuery UI, también debe incluir jQuery. jQuery UI proporciona más funciones como agregar clase, animación en color y aceleración, etc.
Vamos a utilizar algunos métodos jQuery UI addClass() y removeClass() .
-
Método addClass(): se utiliza para agregar clases específicas a cada uno de los elementos objetivo mientras se animan todos los cambios de estilo.
Sintaxis:
.addClass(className, [duration], [easing], [callback])
-
Método removeClass(): se utiliza para eliminar las clases del elemento mientras se animan todos los cambios de estilo.
Sintaxis:
.removeClass(className, [duration], [easing], [callback])
Ejemplo: El siguiente ejemplo demuestra la animación utilizando las clases anteriores. Estamos usando setTimeout para eliminar la clase después de la animación.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#btn {
padding: 10px 8px;
color: green;
background-color: rgba(122, 122, 122, 0.322);
border-radius: 12px;
}
.geeks {
font-size: 40px;
color: green;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-shadow: 2px 2px 4px #880a0a;
letter-spacing: 2px;
}
</style>
<!-- JQuery CDN -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<!-- JQuery UI CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("h2").addClass("geeks", 2000, myCallback);
});
function myCallback() {
setTimeout(function () {
$("h2").removeClass("geeks");
}, 3000);
}
});
</script>
</head>
<body>
<h2>Welcome to GeeksForGeeks.</h2>
<button id="btn">
Click to see the effect</button>
</body>
</html>
Producción:
efecto de animacion
Publicación traducida automáticamente
Artículo escrito por shubhamkumarsingh4957199 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA