How to explode an HTML element with jQueryUI's explode effect?

Question

I can't seem to make the jQueryUI explode effect work. Here's a jsfiddle I tried. Usually when I try the element hides with no explosion effect whatsoever, the jsfiddle just looks strange exploding.

$('h1, h2').click(function() {
    $(this).hide('explode');
});

The jQueryUI docs on the explode effect are not very clear on how to use it.

Am I doing something wrong?

Answer 1

You can fix it by putting more text. Here is a jsfiddle https://jsfiddle.net/k380zpgx/. By the way use this code instead it gives you more control of the effect.

$('h1, h2').click(function() {
    $(this).hide( "explode", {pieces: 16 }, 2000);
});