jQuery: monitorare la visibilità degli elementi con i timer JavaScript

Possiamo monitorare la visibilità degli elementi con jQuery utilizzando i timer JavaScript.

Definiamo il seguente plugin:

(function( $ ) {
	$.fn.visible = function( options ) {
		options = $.extend({
			isVisible: function() {},
			isHidden: function() {}
		}, options);

		return this.each(function() {
			var $element = $( this );
			var timer = setInterval( function() {
				if( $element.is( ":hidden" ) ) {
					options.isHidden( $element );
				} else {
					options.isVisible( $element );
				}
			}, 300 );
		});
	};
})( jQuery );

Esempio d'uso:

$(function() {
	$( "#test" ).visible({
		isVisible: function( el ) {
			el.addClass( "visible" );
		},
		isHidden: function( el ) {
			el.addClass( "hidden" );
		}
	});
});