Eventos para cambios de visibilidad en JQuery

Este artículo es básicamente una traducción de este original en inglés:

http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

En un caso bastante particular necesitaba detectar si cambiaba la visibilidad de un elemento del DOM que venia de una librería externa de JS. Después de dar algunas vueltas encontré una solución bastante elegante, publicada hace bastante tiempo. No he visto nada parecido en castellano, y hay algunos hilos en Stackoverflow, pero con soluciones bastante extrañas, así que lo publicaré aquí.

Con este bloque de código Javascript podemos registrar los eventos 'hide' y 'show' con la función .on() de JQuery como hacemos con cualquiera de los eventos estándar, de forma que podemos ejecutar nuestro código cuando se produzcan.

(function ($) {
    $.each(['show', 'hide'], function (i, ev) {
      var el = $.fn[ev];
      $.fn[ev] = function () {
        this.trigger(ev);
        return el.apply(this, arguments);
      };
    });
  })(jQuery);
  

Una vez incluyamos este código, podemos registar los eventos usando un selector, de la manera tradicional:

$('#foo').on('show', function() {
      console.log('#foo es visible');
});

$('#foo').on('hide', function() {
      console.log('#foo esta oculto');
});

El código del ejemplo completo sería algo así.

Código HTML

<button id="btnMostrar">Mostrar</button>
<button id="btnOcultar">Ocultar</button>
<div class="contenedor">
<div id="foo">
    Elemento #foo
</div>
</div>
<div id="console">
</div>

Código CSS

.contenedor {
    height:60px;
    margin:10px;
}
#foo {
    background-color:#eeeeee;
    width:150px;
    height:50px;
    text-align:center;
    font-size:20px;
}

Código Javascript

// Codigo para registrar eventos hide y show
(function ($) {
    $.each(['show', 'hide'], function (i, ev) {
      var el = $.fn[ev];
      $.fn[ev] = function () {
        this.trigger(ev);
        return el.apply(this, arguments);
      };
    });
  })(jQuery);



// Mostrar elemento #foo al hacer click en el boton mostrar
$('#btnMostrar').click(function(){
   $('#foo').show();
});

// Ocultar elemento #foo al hacer click el boton ocular
$('#btnOcultar').click(function(){
   $('#foo').hide();
});

// Añadimos evento para imprimir un mensaje al mostrar #foo
$('#foo').on('show', function(){
    $('#console').html( $('#console').html() + '#foo es visible'+ '<br>'  )
});

// Añadimos evento para imprimir un mensaje al ocultar #foo
$('#foo').on('hide', function(){  
  $('#console').html( $('#console').html() + '#foo esta oculto'+ '<br>'  )
});

Ejemplo​

ShowHide