Is it possible to configure a Jquery Effect?

Posted on

Question :

Is it possible to change the options in Toggle Explode ? For example: it has nine divisions by default, is it possible to modify the number of parts it explodes and the size of those parts? I also wanted to know if JQuery allows changing the size of the explosion of this effect, because in my case div leaves the page.


Answer :

You can choose the number of parts through the pieces option:

$(elemento).toggle("explode", {
    pieces: 25

The number of pieces does not have to be square, but according to source code it will round the square root of that number to choose the number of rows and columns (ie the pieces will be square, with the same number of rows and columns – without rectangular pieces).

There is no option to customize the size of the explosion. Still according to sources, the offset is proportional to the size of the piece Edit: in fact it is more or less the same every time except for a small rounding, it goes occupy twice the space of the original element), and it always explodes out of its original space (unless the number of pieces is 4, in which case the lower right part does not move).

Example in jsFiddle . If you even need the size of the explosion to be smaller, I suggest setting your own effect by using the explode code as a reference. Just do not css and / or animate (depending on whether you are showing or hiding) you multiply the final offset by a factor of your choice:

var meuFator = 0.2;


left: offset.left + j*(width/cells) +
      (o.options.mode == 'show' ? (j-Math.floor(cells/2))*(width/cells)*meuFator : 0),


Leave a Reply

Your email address will not be published. Required fields are marked *