How to save jQuery "explode" .effect () user interface inside surrounding div?

Question

I am creating an image slider and I would like the effect to explode like a transition. But the problem is that exploding goes beyond the surrounding div when it fires.

<div class="outer"> <!-- outer container that the explosion shouldn't spill over --> <div class="explode"><img src="http://lorempixel.com/400/200/"/></div><!-- Stuff to explode --> </div> 

What I would like is a kind of surrounding div with overflow: hidden so that it doesn't cover other elements of the page. I tried this, but it really didn't help:

http://jsfiddle.net/SJFpF/1/

Do I need to create my own or can it be done, but am I just tight?

Answer 1

The problem is that the explosion effect creates several elements of the fragments, and then adds them to the body . The only way I found overriding the container for these elements is to change the actual animation code so that it adds these elements after the animated element.

Fragment from source:

 el .clone() .insertAfter( el ) // This was previously .appendTo( "body" ) .wrap( "<div></div>" ) .css({ position: "absolute", visibility: "visible", left: -j * width, top: -i * height }) 

See jsFiddle test case

Answer 2

The reason this does not work is because your effect does not really expand the image as such; he breaks it into pieces, and then uses absolute positioning to move them. Overflow does not apply, since absolute positioning pulls them from the stack of elements. That is, suddenly the images are in the layer in front of the containing div.

You will need to write your own effect if you want this to work. One way to do this is to create a grid from small divs and use fragments of your image as a background; you can then compress the divs in different directions so that they look as if they are moving away from each other. Or, if you don't mind losing the "destructive" effect, you can just make the image expand and disappear gradually. This is probably the easiest way.