jQuery: effetto di esplosione sui box

Possiamo ottenere l'effetto dell'esplosione di un box con jQuery semplicemente aumentandone le dimensioni e facendolo scomparire dallo schermo. Inoltre possiamo fare anche in modo che l'elemento venga rimosso dal DOM. Vediamo come.

Creiamo il seguente plugin:

(function($) {
	
	$.fn.explode = function() {
		
		var self = this;
		
	    return this.each(function() {
		
		    var winWidth = $(window).width();
		    var winHeight = $(window).height();
		
		    self.animate({
			    
			    display: 'block',
			    width: winWidth,
			    height: winHeight,
			    opacity: '0'
			
			
		    }, 'fast', function() {self.remove();});
		
	    });	
		
	};
	
})(jQuery);

Il plugin fa assumere all'elemento le dimensioni della finestra del browser, ne azzera l'opacità e quindi lo rimuove dal DOM. Esempio d'uso:

$(document).ready(function() {

    $('#run').click(function(e) {
    
        $('#test').explode();
        
        e.preventDefault();
    
    });

});

Potete visionare l'esempio finale in questa pagina.