Los efectos en jQuery generalmente se usan para agregar animación a una página web. La biblioteca jQuery tiene varios métodos que podemos usar para crear animaciones personalizadas para una página web. En este artículo, veremos todos los métodos disponibles en jQuery para hacer animaciones. Discutiremos todos los métodos junto con el fragmento de código jQuery y la salida.
1. Método animate() : este método se usa para hacer animaciones personalizadas con algunas propiedades CSS seleccionadas. Por ejemplo, la altura, el ancho, etc. se pueden animar con este método.
Ejemplo: En este ejemplo, estamos animando el tamaño de la esfera.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Animate Method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
#shape {
height: 100px;
width: 100px;
background-color: yellow;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="main">
<div id="shape">
</div>
</div>
<script>
$(document).ready(function () {
// On taking the mouse to the shape,
// will increase the size of shape.
$("#shape").mouseover(function () {
$(this).animate({
height: "200px",
width: "200px"
});
});
// On taking out the mouse from the shape,
// will decrease the size of shape.
$("#shape").mouseout(function () {
$(this).animate({
height: "100px",
width: "100px"
});
});
});
</script>
</body>
</html>
Producción:
2. Método clearQueue() : este método se utilizará para eliminar todos los elementos de la cola que todavía están esperando para ejecutarse. Por ejemplo, estamos animando cinco elementos y en el medio usamos .clearQueue, luego detendrá la animación desde ese punto. Aquí hay una cosa más para aclarar que no detendremos ninguna animación en particular una vez que una animación comience, completará su animación independiente.
Ejemplo: en este ejemplo, animamos una forma en varias etapas y detenemos la animación con el método .clearQueue().
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<!-- CSS code for the page -->
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
#box {
height: 100px;
width: 100px;
background-color: rgb(229, 255, 0);
position: absolute;
top: 300px;
left: 0px;
display: none;
}
.btns {
margin: 10px;
}
#start,
#stop {
border-radius: 3px;
color: rgb(0, 0, 0);
font-family: Georgia, "Times New Roman", Times, serif;
height: 40px;
width: 100px;
outline: none;
border: 1px solid black;
}
#box.bluebox {
background-color: blue;
}
#box.greenbox {
background-color: green;
}
#box.redbox {
background-color: red;
}
#box.yellowbox {
background-color: yellow;
}
</style>
</head>
<body>
<div class="main">
<div id="box"></div>
<div class="btns">
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>
</div>
<!-- jQuery code goes here -->
<script>
var box = $("#box");
// Box will be visible
$("#start").click(function () {
box.show(3000);
// New function added to the
// queue for changing the box
// color to the blue
box.queue(function () {
var box = $(this);
box.addClass("bluebox");
box.dequeue();
});
box.animate({ left: 400 }, 2000);
// New function added to the
// queue for changing the box
// color to the green
box.queue(function () {
var box = $(this);
box.addClass("greenbox");
box.dequeue();
});
box.animate({ top: 200 }, 2000);
// New function added to the
// queue for changing the box
// color to the red
box.queue(function () {
var box = $(this);
box.addClass("redbox");
box.dequeue();
});
box.animate({ left: 0 }, 2000);
// New function added to the
// queue for changing the box
// color to the yellow
box.queue(function () {
var box = $(this);
box.addClass("yellowbox");
box.dequeue();
});
box.animate({ top: 300 }, 2000);
// Here animation will be done
box.hide("slow");
});
// This function will stop the animation
// as well as clear the queue of functions
$("#stop").click(function () {
box.clearQueue();
box.stop();
});
</script>
</body>
</html>
Producción:
3. Método delay() : Este método se utilizará para hacer un retraso entre la animación de varios elementos que están presentes en la cola. Con la ayuda de este método, configuraremos un temporizador para que cada animación comience con ese intervalo de tiempo en particular.
Ejemplo: En este ejemplo, estamos retrasando la animación por segundo utilizando el método de retraso.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jquery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(36, 36, 36);
height: 100vh;
}
#c1,
#c2,
#c3,
#c4,
#c5 {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
}
#c5 {
background-color: red;
}
#c4 {
background-color: rgb(0, 255, 0);
}
#c3 {
background-color: rgb(255, 251, 0);
}
#c2 {
background-color: rgb(0, 247, 255);
}
#c1 {
background-color: rgb(139, 1, 132);
}
</style>
</head>
<body>
<div class="main">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></div>
</div>
<!-- jQuery code goes here -->
<script>
// As the page reloads animation will be start.
$("#c5").delay(1000).animate({
height: "0px", width: "0px" });
$("#c4").delay(2000).animate({
height: "0px", width: "0px" });
$("#c3").delay(3000).animate({
height: "0px", width: "0px" });
$("#c2").delay(4000).animate({
height: "0px", width: "0px" });
$("#c1").delay(5000).animate({
height: "0px", width: "0px" });
</script>
</body>
</html>
Producción:
4. Método dequeue() : El método .dequeue() se utiliza para excluir cualquier función determinada de la cola y luego ejecuta el resto de la función. Por ejemplo, tenemos una cola con cinco elementos y queremos eliminar el tercer elemento de la cola, entonces llamaremos al método .dequeue(), el método de dequeue se llamará con el método de cola.
Ejemplo: en este ejemplo, el tamaño de la forma se animará y usaremos una función para cambiar el color de la forma una vez durante todo el proceso de animación y luego, con la ayuda del método de dequeue, excluiremos esa función para que el resto de las funciones que esperan en la cola se ejecutarán.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jquery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Dequeue method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(36, 36, 36);
height: 100vh;
}
#txt {
color: white;
font-size: 1rem;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="start">Start</button>
</div>
<!-- jQuery code goes here -->
<script>
$("#start").click(function () {
var t = $("#txt");
t.animate({ fontSize: "2rem" }, 1500);
t.animate({ fontSize: "3rem" }, 1500);
t.queue(function () {
var newColor = $(this);
newColor.css("color", "#29a329");
newColor.dequeue();
});
t.animate({ fontSize: "4rem" }, 1500);
t.animate({ fontSize: "5rem" }, 1500);
});
</script>
</body>
</html>
Producción:
5. Método fadeIn() : FadeIn significa hacer visible cualquier elemento determinado. Este método simplemente anima el elemento en función de la opacidad del 0 % al 100 %.
Ejemplo: En este ejemplo, el texto se desvanecerá al hacer clic en un botón.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Fade in method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
display: none;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="fadein">Fade In</button>
</div>
<!-- jQuery code goes here -->
<script>
// Initially text is invisible.
$("#fadein").click(function () {
$("#txt").fadeIn(2000);
});
</script>
</body>
</html>
Producción:
6. Método fadeOut() : el comportamiento de este método es justo el opuesto al de fadeIn, este método animará el elemento de opaco a transparente.
Ejemplo: En este ejemplo, el texto se desvanecerá al hacer clic en un botón.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Fade out method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="fadeout">Fade Out</button>
</div>
<!-- jQuery code goes here -->
<script>
$("#fadeout").click(function () {
$("#txt").fadeOut(2000);
});
</script>
</body>
</html>
Producción:
7. Método fadeTo() : podemos animar cualquier elemento determinado a un valor de opacidad particular con este método. Por ejemplo, si queremos hacer visible cualquier elemento oculto pero solo el 50% visible, entonces tenemos que usar este método.
Ejemplo: En este ejemplo, estamos desvaneciendo un texto al 50% de la opacidad.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>FadeTo method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">
Half the opacity of text.
</button>
</div>
<!-- jQuery code goes here -->
<script>
// Text will be half visible and this
// animation will take 2 seconds
$("#btn").click(function () {
$("#txt").fadeTo(2000, 0.5);
});
</script>
</body>
</html>
Producción:
8. Método fadeToggle() : Podemos usar este método para hacer una animación alternar con fadeIn y fadeOut.
Ejemplo: En este ejemplo, cambie entre fadeIn y fadeOut al hacer clic en un botón.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>FadeToggle method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Hide/Show</button>
</div>
<!-- jQuery code goes here -->
<script>
$("#btn").click(function () {
$("#txt").fadeToggle(3000);
});
</script>
</body>
</html>
Producción:
9. Método hide() : podemos ocultar el elemento seleccionado con la ayuda de este método.
Ejemplo: En este ejemplo, estamos ocultando un texto al hacer clic en un botón.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Hide method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Hide</button>
</div>
<!-- jquery code goes here -->
<script>
// Text will be hidden on button click
$("#btn").click(function () {
$("#txt").hide("fast");
});
</script>
</body>
</html>
Producción:
10. Método queue() : este método se utiliza para mostrar o manipular la cola de funciones que se ejecutan en los elementos particulares. Una sola o más funciones podrían estar en una cola que está esperando para ejecutarse. Un elemento puede tener varias colas.
Ejemplo: en este ejemplo, podemos ver cuántos métodos hay en la cola.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Queue method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
p {
color: #fff;
}
#box {
height: 10px;
width: 10px;
background-color: yellow;
border-radius: 100%;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="main">
<p>Total functions in the queue: <i></i></p>
<div id="box"></div>
<button id="start">Start</button>
</div>
<!-- jQuery code goes here -->
<script>
$(document).ready(function () {
$("#start").click(function () {
var div = $("#box");
div.animate({ height: 100, width: 100 });
div.animate({ height: 500, width: 500 });
div.animate({ height: 550, width: 550 });
div.animate({ height: 0, width: 0 });
$("i").text(div.queue().length);
});
});
</script>
</body>
</html>
Producción:
11. Método show() : Este método se utilizará para mostrar el elemento seleccionado desde el estado oculto.
Ejemplo: en este ejemplo, mostramos texto al hacer clic en un botón.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>Show method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: green;
display: none;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Show</button>
</div>
<!-- jQuery code goes here -->
<script>
// Initially text is hidden.
$("#btn").click(function () {
$("#txt").show("slow");
});
</script>
</body>
</html>
Producción:
12. Método slideDown() : se mostrará un elemento con la animación de deslizamiento hacia abajo.
Ejemplo: el texto se elevará con una animación deslizante hacia abajo al hacer clic en un botón.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<title>SlideDown method</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(41, 41, 41);
flex-direction: column;
height: 100vh;
}
h1 {
color: white;
display: none;
}
</style>
</head>
<body>
<div class="main">
<h1 id="txt">GeeksforGeeks</h1>
<button id="btn">Slide Down</button>
</div>
<!-- jQuery code goes here -->
<script>
// Initially text is hidden.
$("#btn").click(function () {
$("#txt").slideDown();
});
</script>
</body>
</html>
Producción:
