jQuery UI, slide out one Div, slide in Next

javascript, jquery, jquery-ui

Solution

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!

Problem

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/

Original source