Effects:explode - multiple explosions cut short

[stringfold]

If you trigger a second explode effect before the first is completed, all the animated image fragments for both animations are removed from the window when the first animation ends.

This is because the callback called when the first animation ends simply calls:

$('div.ui-effects-explode').remove();

which removes all the image fragments for every animation currently in progress.

This is a shame because everything else works for concurrent explosions works fine -- the animations and the callback function to the user code when the animation is supposed to end.

The fix would be to attach a unique identifier to each set of exploding image elements so the callback can selectively remove only the images for that specific animation.

[stringfold]

I should add that, if possible, you should be able to select the exploding pieces by the unique identifier -- e.g. for overlapping explosions, you would be able set the z-index to ensure the pieces were displayed in the correct order.

Perhaps an "id" option could be added to the effect API for the explode effect, which would be set to all the exploding pieces. Absent the setting of that option, the code would generate its own unique id to allow the correct removal of only the pieces associated with that explosion.

[gnarf]

 http://jsfiddle.net/gnarf/yhHXA/ - I have a solution in mind

[gnarf]

 https://github.com/jquery/jquery-ui/pull/149

[gnarf]

effects.*: Explode effect was removing more elements than it should upon completion. Fixed #6022 - multiple explosions cut short

Changeset: 4ade64b69028178772d0b9c11fbf7165de160972

[scott.gonzalez]

#8328 is a duplicate of this ticket.