El método fadeIn() en jQuery se usa para cambiar la opacidad de los elementos seleccionados de ocultos a visibles. Los elementos ocultos no se mostrarán.
Sintaxis:
$(selector).fadeIn( speed, easing, callback )
Parámetros: este método acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- Velocidad: es un parámetro opcional y se usa para especificar la velocidad del efecto de desvanecimiento. El valor predeterminado de velocidad es 400 milisegundos. Los posibles valores de la velocidad son:
- milisegundos
- «lento»
- «rápido»
- Easing: es un parámetro opcional y se usa para especificar la velocidad del elemento en diferentes puntos de la animación. El valor predeterminado de aceleración es «swing». Los posibles valores de la aceleración son:
- «ritmo»
- «lineal»
- Devolución de llamada: es un parámetro opcional. La función de devolución de llamada se ejecuta después de que se completa el método fadeIn().
Los siguientes ejemplos ilustran el método fadeIn() en jQuery:
Ejemplo 1: Este ejemplo describe el método fadeIn() con una velocidad de 1000 milisegundos.
<!DOCTYPE html>
<html>
<head>
<title>
fadeIn() Method in jQuery
</title>
<style>
#Outer {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<div id= "Outer">
<h1 style = "color:white;" >
GeeksForGeeks
</h1>
</div><br>
<button id = "btn">
Fade In
</button>
<!-- jQuery script of fadeIn() method -->
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("#Outer").fadeIn(1000);
});
});
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón:
Ejemplo 2: Este ejemplo describe el método fadeIn() con «swing» de aceleración.
<!DOCTYPE html>
<html>
<head>
<title>
fadeIn() Method in jQuery
</title>
<style>
#Outer {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<div id= "Outer">
<h1 style = "color:white;" >
GeeksForGeeks
</h1>
</div><br>
<button id = "btn">
Fade In
</button>
<!-- jQuery script of fadeIn() method -->
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("#Outer").fadeIn("swing");
});
});
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA