El fadeTo() es un método incorporado en jQuery que se usa para cambiar la opacidad del elemento seleccionado.
Sintaxis:
$(selector).fadeTo(speed, opacity, easing, call_function)
Aquí selector es el elemento seleccionado.
Parámetro: Acepta cuatro parámetros que se especifican a continuación:
- speed: Especifica la velocidad del efecto de desvanecimiento.
- opacidad: Especifica que se desvanezca y este valor debe estar entre 0.0 y 1.0.
- Easing: Especifica la velocidad en diferentes puntos de la animación.
- call_function: es un parámetro opcional y realiza una función después de realizar el método fadeTo.
Valor devuelto: No devuelve ningún valor.
Código #1:
En el siguiente código, no se pasa ningún parámetro de función opcional.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<style>
body {
width: 40%;
height: 100px;
border: 2px solid green;
padding: 20px;
}
</style>
</head>
<body>
<!-- click on this paragraph and this paragraph will fade out -->
<p>
This paragraph will fade out !
</p>
<!-- after clicking on this paragraph this paragraph will
not fade out -->
<p>
This paragraph will not fade !
</p>
<!-- jQuery code to show working of this method -->
<script>
$("p:first").click(function() {
$(this).fadeTo("slow", 0.33);
});
</script>
</body>
</html>
Salida:
antes de hacer clic en cualquier párrafo-
Después de hacer clic en el primer y segundo párrafo-
Código #2:
En el siguiente código, se pasa el parámetro de función opcional.
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").fadeTo(2000, 0.2, function() {
alert("The fadeTo effect has finished!");
});
});
});
</script>
<style>
body {
width: 40%;
height: 100px;
border: 2px solid green;
padding: 20px;
}
</style>
</head>
<body>
<!-- this paragraph will fade out -->
<p>This is a paragraph.</p>
<!-- click on this button and paragraph will fade out -->
<button>Click me</button>
</body>
</html>
Salida:
antes de hacer clic en el botón «Haz clic en mí»-
Después de hacer clic en el botón «Haz clic en mí»-
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA