En este artículo, haremos clic en un botón para animar el elemento de párrafo usando jQuery. Para animar los elementos del párrafo, usamos el método animate(). El método animate() se usa para cambiar el estado del elemento con estilo CSS. Este método también se puede usar para cambiar la propiedad CSS para crear el efecto animado para el elemento seleccionado.
Sintaxis:
$(selector).animate({styles}, para1, para2, para3);
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to click a button to animate
the paragraph element using jQuery?
</title>
<!-- Import jQuery cdn library -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#GFG").animate({
opacity: 0.5,
fontSize: "3em",
}, 1000);
});
});
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to click a button to animate
the paragraph element using jQuery?
</h3>
<p id="GFG">
GeeksforGeeks computer science portal
</p>
<button>Click Here!</button>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
After Click Button:
