I don't know if this will make sense but i will try my best to explain. I currently have image1 which fills the whole x-axis of my screen. I need to use j-query to animate this image so that when i click my button, it will open out(think of someone opening closed curtains, the left and right side will be pulled to the sides) so that image2 will be display.

What im asking is, can j-query animate like this? what is the method/effect called? right now image2 is underneath image1, how can i get image2 to be behind image1? Or would that be the other way around, where image2 needs to be in the html and image1 is layered ontop of it?

I think I understand what you're describing. You'll need two elements, placed side-by-side. The left element will show the left 50% of your image, and the right element will show the remaining 50% on the right. You'll then animate these off-screen. The left will go it's full width off to the left, and the right will go its full width off to the right, revealing your image below them.

At this point you would probably want to set a fixed width and height to the UL that holds all of these list items, and place them at 0,0 with regards to their parent. You would then give each a z-index to layer them one over another.

With jQuery, you would grab the element with the highest z-index and animate its left and right elements off screen, revealing the element with the second-highest z-index. You would then change the z-index of the recently animated element to 1 less than the lowest, and then return its left and right items to their original location.