Ocultar y Mostrar contenido con jQuery

   Uno de los tantos problemas al momento de programar Front-End es ocultar y mostrar cosas de forma dinámica, y aunque existen muchas formas de hacerlo (css, javascript puro, php) voy a mostrarles un pequeño TIP de como lograr esto con jQuery sin tantas complicaciones. Primero lo primero, entender la documentación. Para el ejemplo utilizare los métodos hide y show, por lo que algo básico sería lo siguiente:

$(".block").hide('slow');
$(".block").show('slow');

   Funciona, ¿pero cual es el problema de esto?. Si tenemos muchos elementos (y según la documentación) la porción de código se ejecutará por cada uno que coincida con el selector, en pocas palabras... 7 boques, 7 veces que se ejecutará el método "hide()". Para evitar esto colocamos un callback, guiándonos por la documentación:

$(".block").hide('slow', function(){
  $(".block").show('slow');
});

   Perfecto, con esto el método "show()" se ejecuta una vez completado el "hide()", pero ahora se ve mal el efecto. Esto es porque se siguen ejecutando por cada elemento que coincide con el selector, es cuando debemos hacer uso de un método llamado "promise". En pocas palabras lo que esto hace es retornar un elemento que contiene todas las acciones que coinciden con el selector (estén en cola [queue] o no) una vez terminados todos los efectos. Entonces nuestro código quedaría de la siguiente forma:

$(".block").hide('slow').end().promise().done(function(){
  $(".block").show('slow');
});

   Con esto estamos diciendo que finalizamos con el elemento mostrando el contenido una vez finalizado el "hide()" para todos los elementos que coinciden con el selector, de cualquier forma dejo un enlace a JSFiddle mostrando el efecto en un ejemplo mas claro:

Enlace al JSFiddle

Recibe notificaciones por correo