how to make a sliding door effect?

Question

I want to have a sliding door effect, where the user clicks a link and a door comes down over the current content and goes up revealing the new content. Chris Carey did this in prototype, but I want to use jquery. Are there any plugins or tutorials? I saw one, but it was very basic.

prototype example

Answer 1

Here's a basic example to get you started:

Try it out: http://jsfiddle.net/yuF8S/3/ (updated to switch content)

js

$('a').click(function() {
    var index = $(this).index();
    $('#door').animate({top:0}, 500, function() {
        $('#content > .contentItem').hide()
            .eq(index).show();
        $(this).animate({top: -200}, 500);
    });
});

html

<div id='container'>
    <div id='content'>
        <div class='contentItem'>content display 1</div>
        <div class='contentItem'>content display 2</div>
        <div class='contentItem'>content display 3</div>
    </div>
    <div id='door'></div>
</div>

<div id='links'>
    <a href='#'>content 1</a>
    <a href='#'>content 2</a>
    <a href='#'>content 3</a>
</div>

css

#container {
    float:left;
    width: 200px;
    height: 300px;
    clip: auto;
    overflow: hidden;
    position: relative;
}
#content {
    width: 100%;
    height: 200px;
    background: yellow;
    position: absolute;
    bottom: 0;
}
.contentItem {
    display:none;
}
.contentItem:first-child {
    display:block;
}
#door {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -200px;
    background: black;
}
#links {
    float: left;
} 
a {
    display: block;
}