How do I keep the jQuery UI "explode" .effect() inside the surrounding div?

Question

I'm creating an image slider, and i'd like to have the explode effect as the transition. But the problem is, explode goes outside of 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'd like is a sort of surrounding div with overflow:hidden so that it doesn't cover the other page elements. I tried this but it didn't really work:

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

Am i going to have to create my own or can this be done but i'm just being dense?

It seems like jquery create elements with absolute position, but im not sure about it — ccd580ac6753941c6f84fe2e19f229
– ccd580ac6753941c6f84fe2e19f229, Commented Jun 18, 2013 at 16:49
I don't think there is an easy solution to this. Try looking at the code for the explosion effect and see how it works, and that may lead to a solution. — Brad M
– Brad M, Commented Jun 18, 2013 at 16:49
just checked it is, <div class="ui-effects-explode" style="position: absolute; overflow: hidden; ... , but i dont know yet workaround for it — ccd580ac6753941c6f84fe2e19f229
– ccd580ac6753941c6f84fe2e19f229, Commented Jun 18, 2013 at 16:53
Part of why your fiddle looks weird is that LoremPixel serves up a new random image every time the img is loaded. It seems (and this is interesting) that the "explode" effect reloads a copy of the image before doing its thing. — Justin Morgan
– Justin Morgan, Commented Jun 18, 2013 at 16:54
@JustinMorgan Yeah, i'm not too worried about that, it's just a placeholder image. The problem will still be the same whatever image. — Sam T
– Sam T, Commented Jun 18, 2013 at 16:58

mekwall · Accepted Answer · 2013-06-18 17:23:20Z

7

The problem is that the explode effect creates a number of shrapnel elements and then append those to body. The only way I found to override the container for these elements was to change the actual code of the animation, so that it appends these elements after the animated element instead.

Snippet 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 test case on jsFiddle

edited Jun 18, 2013 at 17:23

answered Jun 18, 2013 at 16:56

mekwall

29.1k6 gold badges78 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sam T Over a year ago

So i could change it to append to el.parent()? That way i'd still be able to use it for other elements if desired?

War10ck Over a year ago

@SamT .appendTo() takes a selector. So to make it more universal, you could do something like the following: $(this).parent(). That would append to the parent of the exploding element. You can append to any element you want to by passing the proper selector. This modification on the previous example demonstrates this by exploding the content in the next sibling to the parent div by passing .appendTo($(this).parents('.outer').next()). The first is what you asked about. The second is purely for demonstration purposes.

mekwall Over a year ago

@SamT Yep, that should work. But I'd probably use .insertAfter(el) instead.

mekwall Over a year ago

@SamT Made another version that uses a data-animation-container attribute to define the selector. If that attribute is omitted, it will fallback to use document.body instead.

Sam T Over a year ago

Disregard the previous comment, i managed to sort it. Here's a working version for future reference

|

Justin Morgan · Accepted Answer · 2013-06-18 17:04:23Z

The reason this isn't working is that your effect isn't really expanding the image per se; it's chopping it into chunks, then using absolute positioning to move them around. Overflow doesn't apply, because absolute positioning pulls them out of the element stack. That is to say, suddenly the images are in a layer in front of the containing div.

You're going to have to write your own effect if you want this to work. One way to do that might be to create a grid of small divs and use pieces of your image as their background; you can then shrink the divs in different directions so that it looks like they're moving away from each other. Or, if you don't mind losing the "shattering" effect, you can simply cause the image to gradually expand and fade out. That's probably the easiest way.

Collectives™ on Stack Overflow

How do I keep the jQuery UI "explode" .effect() inside the surrounding div?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related