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.