How can I do something similar to jquery’s explode effect, but make it where it doesn’t actually disappear? What i’m wanting to do is break the 4 corners of an image apart and spread them out to display a box where the whole image was. I have already made 4 separate images, but I can’t figure out how to spread them apart, or “explode” them. I’ve tried making them float and then animating the parent div’s width and height. That works horizontally but not vertically. Anyone have an Idea how to accomplish this?
Basically, after looking into the source code of the explode effect, I want the explode effect with out it hiding at the end. Is there anyway to do that without re-writing the effect?
You could replace the image with 4 absolute divs each 1/4 the size of the image and placed together to set up a box. Then set the image as a background in each div, each getting a different background-position so it forms the image. Then use jQuery’s animate function to animate top/left/right/bottom for each div to make it split apart. In addition, you can use jQuery’s easing plugin with animate to make the animations look the way you want.