El efecto de desvanecimiento en jQuery se puede crear usando diferentes métodos como fadeIn() , fadeOut() , fadeToggle() y fadeTo() . Estos métodos se pueden usar para crear diferentes efectos de desvanecimiento en jQuery con diferentes parámetros.
fadeIn(): este método se usa para ocultar el elemento con un efecto de desvanecimiento.
Sintaxis:
$('selector').fadeIn(speed, callback_function);
fadeOut(): este método se utiliza para hacer que el elemento sea visible u oculto con un efecto de desvanecimiento.
Sintaxis:
$('selector').fadeOut(speed, callback_function);
fadeToggle(): este método se usa para alternar entre los métodos fadeIn() y fadeOut() con los efectos de desvanecimiento.
Sintaxis:
$('selector').fadeToggle(speed, callback_function);
fadeTo(): este método se utiliza para atenuar el elemento visible hasta cierto punto de opacidad dada en los parámetros con referencia a 1.
Sintaxis:
$('selector').fadeTo(speed, opacity, callback_function);
El siguiente ejemplo elabora el concepto de pocos efectos de desvanecimiento.
Ejemplo 1: El siguiente código muestra que la imagen alterna entre los métodos fadeIn() y fadeOut().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content= "width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
body {
text-align: center;
}
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<button id="btnfadeToggle">FADE TOGGLE</button>
<br>
<!-- Image added using img tag with src attribute -->
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210728124621/geekslogo.png"
id='img1' height='150px' width='250px'>
<img>
<script>
$(document).ready(function() {
$('#btnfadeToggle').click(function() {
$('#img1').fadeToggle('slow');
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código muestra el método fadeTo() en jQuery que se usa para cambiar la opacidad del elemento seleccionado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content= "width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<button id="btnfadeTo">FADE TO</button>
<br>
<!-- Image added using img tag with
src attribute -->
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210728124621/geekslogo.png"
id='img1' height='150px' width='250px'>
<img>
<script>
$(document).ready(function() {
$('#btnfadeTo').click(function() {
$('#img1').fadeTo('slow', 0.4);
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA