“fadeToggle” en jQuery

Aquí va un truco para principiantes en jQuery.

¿Alguna vez has deseado que jQuery tuviera un efecto fadeToggle para poder usarlo como interruptor para mostrar elementos de tu web? Hay fadeIn, fadeOut, slideUp, slideDown, slideToogle, toogle, etc, pero no hay un dichoso fadeToggle. Aunque con algo de imaginación podemos montarlo en un momento:

$('#boton').click(function () {
  if ($('#div1').is(':visible')) {
    $('#div1').fadeOut('slow');
  } else {
    $('#div1').fadeIn('slow');
  };
});

[Demo] (hacer click en el enlace del formulario)

La segunda línea simplemente comprueba si el elemento es visible, y si es así nos lleva al fadeOut. Si por el contrario está oculto, pasará al fadeIn, o lo que queramos ponerle.

Otra ventaja es poder usar velocidades distintas para ocultar y mostrar, o poder usar fadeTo para no ocultar/mostrar del todo el elemento.

En fin, hay mil combinaciones.. :D

Actualización: Acabo de ver una alternativa en dans.blog que consiste en crear la función fadeToggle, que también es bastante fácil, en 3 líneas:

jQuery.fn.fadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

Después se puede usar exactamente igual que slideToggle.

Etiquetas: , , ,

Publicar un Comentario

Tu email nunca será publicado o compartido. Los campos requeridos están marcados con un *

*
*

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>