Dos butones con los efectos de jquery de fadeIn e fadeOut
jQuery tiene los siguientes métodos de desvanecimiento:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
...
Método jQuery fadeIn()
El método fadeIn() se utiliza para desvanecerse en un elemento oculto
Sintaxis:
$(selector).fadeIn(speed,callback);
La opcion velocidad Puede tomar los siguientes valores: "lento", "rápido" o milisegundos.
El siguiente ejemplo demuestra la fadeIn() método con diferentes parámetros:
Codigo del ejemplo
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
Codigo completo del ejemplo
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
Método jQuery fadeOut()
El método fadeOut() se utiliza para desvanecer un elemento visible.
Sintaxis:
$(selector).fadeOut(speed,callback);
El parámetro de velocidad opcional especifica la duración del efecto. Puede tomar los siguientes valores: "lento", "rápido" o milisegundos.
El parámetro de devolución de llamada opcional es una función que se ejecutará después de la el desvanecimiento se completa.
Codigo del uso de fadeOut()
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Método jQuery fadeToggle()
El método fadeToggle() alterna entre los metodos fadeIn() y fadeOut()
Sintaxis:
$(selector).fadeToggle(speed (Velocidad),callback(llamar de vuelta));
El parámetro de velocidad opcional especifica la duración del efecto. Puede tomar los siguientes valores: "lento", "rápido" o milisegundos.
El parámetro de devolución de llamada opcional es una función que se ejecutará después de la el desvanecimiento se completa.
Seguidamente un ejemplo de codigo con fadeToggle()
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
Método jQuery fadeTo()
El método fadeTo() permite desvanecerse a una opacidad dada (valor entre 0 y 1).
Sintaxis:
$(selector).fadeTo(speed,opacity,callback);
El parámetro de velocidad requerido especifica la duración del efecto. Puede tomar los siguientes valores: "lento", "rápido" o milisegundos.
El parámetro de opacidad requerido en el fadeTo() El método especifica el desvanecimiento a una opacidad dada (valor entre 0 y 1).
El parámetro de devolución de llamada opcional es una función que se ejecutará después de que se complete la función.
Ejemplo de codigo fadeTo()
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias