Efectos con los métodos fadeIn() y fadeOut()

Estos dos métodos son similares a show y hide pero con la diferencia que fadeIn hace aparecer los elementos HTML con opacidad. El método fadeOut decolora hasta desaparecer, es decir reduce la opacidad del elemento en forma progresiva.

Método fadeIn()

El método fadeIn() cambia gradualmente la opacidad, para los elementos seleccionados, de oculta a visible (efecto de desvanecimiento).
Nota : Los elementos ocultos no se mostrarán en absoluto (ya no afecta el diseño de la página).
Consejo: este método se suele utilizar junto con el método fadeOut () .

Sintaxis

$(selector).fadeIn(speed,easing,callback)

speed Es opcional y especifica la velocidad del efecto de espectáculo. El valor predeterminado es 400 milisegundos pero puede tener valores posibles, milisegundos , "slow" y "fast"
easing Es opciona y especifica la velocidad del elemento en diferentes puntos de la animación. El valor predeterminado es "swing" , pero puede tener valores posibles, "swing" , se mueve más lento al principio / final, pero más rápido en el medio y "lineal" , se mueve a una velocidad constante hay más funciones de aceleración disponibles en complementos externos.<
callback Opcional, una función que se ejecutará después de que se complete el método show () Para obtener más información sobre la devolución de llamada, visite nuestro capítulo de devolución de llamada de jQuery.

Método fadeIn()

El método fadeOut () cambia gradualmente la opacidad de los elementos seleccionados de visible a oculto (efecto de desvanecimiento).

Nota : Los elementos ocultos no se mostrarán en absoluto (ya no afecta el diseño de la página).

Consejo: este método se utiliza a menudo junto con el método fadeIn () .

Sintaxis

$(selector).fadeOut(speed,easing,callback)

speed Es opcional y especifica la velocidad del efecto de espectáculo. El valor predeterminado es 400 milisegundos pero puede tener valores posibles, milisegundos , "slow" y "fast"
easing Es opciona y especifica la velocidad del elemento en diferentes puntos de la animación. El valor predeterminado es "swing" , pero puede tener valores posibles, "swing" , se mueve más lento al principio / final, pero más rápido en el medio y "lineal" , se mueve a una velocidad constante hay más funciones de aceleración disponibles en complementos externos.<
callback Opcional, una función que se ejecutará después de que se complete el método show () Para obtener más información sobre la devolución de llamada, visite nuestro capítulo de devolución de llamada de jQuery.

Ejemplo

El efecto fadeOut() oculta un elemento variando su opacidad y el efecto fadeIn() muestra un elemento (anteriormente oculto) cambiando su opacidad.

<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("img").fadeInt();
  });
  $(".btn2").click(function(){
    $("img").fadeOut();
  });
});
</script>
</head>
<body>
<img src="imagenes/prueba.jpg" style="max-width:100%;width:auto;height:auto;">
<button class="btn1">Ocultar foto</button>
<button class="btn2">Mostrar foto</button>
</body>
</html>

Ver ejemplo anterior

Problema:Confeccionar una página que muestre un recuadro con texto. Disponer dos botones, uno que oculte (fadeOut) y el otro que lo muestre (fadeIn).

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos21.css" type="text/css">
</head>

<body>
  <input type="button" id="boton1" value="Ocultar recuadro">
  <input type="button" id="boton2" value="Mostrar recuadro">
  <div id="descripcion" class="recuadro">
    <p>HTML es el lenguaje que se emplea para el desarrollo de páginas
      de internet.</p>
    <p>Este lenguaje está constituido de elementos que el navegador interpreta
      y las despliega en la pantalla
      de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes
      sobre una página, hipervínculos
      que nos permiten dirigirnos a otra página, listas, tablas para tabular
      datos, etc.</b>
      <p>Para poder crear una página HTML se requiere un simple editor
        de texto (en nuestro caso emplearemos este
        sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador
        que en este preciso
        momento está utilizando (recuerde que usted está viendo en este
        preciso momento una página HTML con su
        navegador).</p>
      <p>Lo más importante es que en cada concepto desarrolle los ejercicios
        propuestos y modifique los que se
        presentan ya resueltos.</p>
      <p>Este curso lo que busca es acercar el lenguaje HTML a una persona que
        nunca antes trabajó con el mismo.
        No pretende mostrar todas los elementos HTML en forma alfabética.</p>
      <p>Como veremos, de cada concepto se presenta una parte teórica,
        en la que se da una explicación completa,
        luego se pasa a la sección del ejercicio resuelto donde podemos ver el
        contenido de la página HTML y cómo
        la visualiza el navegador. Por último y tal vez la sección más
        importante de este tutorial es donde se
        propone que usted haga páginas en forma autónoma (donde realmente
        podrá darse cuenta si el concepto quedó
        firme).</p>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="func21.js"></script>
</body>

</html>

Ver ejemplo anterior

func21.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#boton1");
  x.click(ocultarRecuadro);
  x = $("#boton2");
  x.click(mostrarRecuadro);
}

function ocultarRecuadro() {
  let x = $("#descripcion");
  x.fadeOut("slow");
}

function mostrarRecuadro() {
  let x = $("#descripcion");
  x.fadeIn("slow");
}

estilos21.css

.recuadro {
  background-color:#ffffcc;
  font-family:verdana;
  font-size:14px;

  border-top-width:1px;
  border-right-width:3px;
  border-bottom-width:3px;
  border-left-width:1px;

  border-top-style:dotted;
  border-right-style:solid;
  border-bottom-style:solid;
  border-left-style:dotted;

  border-top-color:#ffaa00;
  border-right-color:#ff0000;
  border-bottom-color:#ff0000;
  border-left-color:#ffaa00;
}

La función ocultarRecuadro se ejecuta cuando presionamos el botón de "Ocultar recuadro":

function ocultarRecuadro() {
  let x = $("#descripcion");
  x.fadeOut("slow");
}

donde obtenemos la referencia del div mediante su id y procedemos a llamar al método fadeOut pasándole el string "slow", con esto logramos que se oculte el recuadro y se decolore lentamente hasta desaparecer.

De forma similar la función mostrarRecuadro:

function mostrarRecuadro() {
  let x = $("#descripcion");
  x.fadeIn("slow");
}

llama a la función fadeIn pasando como parámetro el string "slow".

Las formas de llamar a los métodos fadeIn y fadeOut:

Lo muestra con una animación rápida:

fadeIn("fast")

Lo muestra con una animación normal:

fadeIn("normal")

Lo muestra con una animación lenta:

fadeIn("slow")

Lo muestra con una animación que tarda tantos milisegundos como le indicamos:

fadeIn([cantidad de milisegundos])

Lo muestra con una animación que tarda tantos milisegundos como le indicamos y ejecuta al final la función que le pasamos como segundo parámetro:

fadeIn([cantidad de milisegundos],[función])

De forma similar funciona el método fadeOut.

(adsbygoogle = window.adsbygoogle || []).push({});

Efectos con los métodos fadeIn() y fadeOut()

Método fadeIn()

Método fadeIn()