jQuery: creare un evento per verificare la visibilità di un elemento

I browser attualmente non supportano tutti i DOM Mutation Events, ossia quegli eventi che ci permettono di monitorare i cambiamenti nelle proprietà di un elemento, come la sua visibilità. In questo caso possiamo usare jQuery.

Possiamo creare un timer JavaScript che ad intervalli minimi verifica la visibilità di un elemento:

$(function() {

	$( '#box' ).on( 'visibility', function() {
		var $element = $( this );
		var timer = setInterval( function() {
			if( $element.is( ':hidden' ) ) {
				$( '#status' ).text( 'Hidden' );
			} else {
				$( '#status' ).text( '' );
			}
		}, 300 );
	}).trigger( 'visibility' );
	
	$( '#test' ).on( 'click', function() {
		$( '#box' ).fadeOut( 1000 );
	
	});

});

300 millesimi di secondo è un intervallo che ci permette di far si che la verifica sia quasi immediata.