jQuery UI provides an interesting effect called explode which basically divides an element into pieces while making it appear or disappear. We can actually combine this feature with the core jQuery's animate() method to get interesting effects. This features allows us also to specify the number of pieces and the speed of the animation.
For example, we can use explode in this way:
$(document).ready(function() {
$('#test').click(function() {
$(this).animate({width: 100, height: 100}, 2000, function() {
$(this).hide('explode', { pieces: 8 }, 2000).show(2000, function() {
$(this).animate({width: 150, height: 150}, 2000);
});
});
});
});
The box dimensions first change, then the element is hidden and split into pieces, and finally appears again and get its normal dimensions. As you can see, explode can be attached as a parameter to the hide() method together with the number of pieces (stored in the property pieces) and the actual speed of the animation expressed in milliseconds.