Question

I have a layout at the moment with two main divs, both have to be full width and height, but obviously you can only see one at a time.

I’d like a nice transition when swapping between the two, as opposed to a simple fade/show.

I’ve tried to make it so one div slides out at the same time as the other Div sliding in, but due to positioning and layout, one div is forced under the next.

Images displaying issue:

Here’s a fiddle displaying the issue:
http://jsfiddle.net/bazzlad/spbyk/1/

Answer 1

Change:

#test {
    background: #fff;
    height: 100%;
    display: none;

}

to:

#test {
    background: #fff;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

JsFiddle: http://jsfiddle.net/spbyk/3/

Enjoy and good luck!