how to make a sliding door effect?

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

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;
}

$("#elementId").click(function(){
   $(this).slideUp();
});

slideDown() is the reciprocal.

The basically want to move an absolutely positioned div when clicked upon to a new location using the animate function.

$('#moving-div').click(function() {
    if ($(this).position().top < 150) {
        $(this).animate({
            top: 200px
        }, 1000);
    } else {
        $(this).animate({
            top: 100px
        }, 1000);
    }
});

What is happening there, is that he has three separate DIVs making up the three menus, only one is visible at a time. Overlaying all of those menu DIVs, is a "door" as he has called it, a cover, it is at a higher z-index than the menu DIVs, so appears on top of it, if you setup your positioning properly. The cover can be stretched in height resulting in the "door" growing over the top of the menu.

The process is:

1. let the click event on the button trigger the animation
2. animate() the height increase in the cover from its default size, to completely covering the menu
3. hide() the currently visible menu, and show() the one to be made visible
4. animate() the decrease in height of the cover to the default size

If you have the following HTML (making the first menu visible initially, the others hidden, and the cover at an "open" height just above the visible menu, with a higher z-index overlaying the visible menu):

<div id="menu-container">
    <div id="cover"></div>
    <div id="menu-contact" class="menu"></div>
    <div id="menu-home" class="menu"></div>
    <div id="menu-products" class="menu"></div>
</div>


<div id="buttons">
    <div id="contact" class="menu-button"></div>
    <div id="home" class="menu-button"></div>
    <div id="products" class="menu-button"></div>
</div>

Then your jQuery can be:

$('.menu-button').click(function() {
    var cMenuButton = $(this);
    var cMenuID = cMenuButton.attr('id');

    var coverHeight = $('#cover').height();
    var cVisibleMenu = $('.menu:visible');
    var cVisibleHeight = cVisibleMenu.height();

    $('#cover').animate({'height': coverHeight + cVisibleHeight}, 600, 'linear', function() {
        $('.menu').hide();
        $('#menu-' + cMenuID).show();

        var newMenuHeight = $('#menu-' + cMenuID).height();
        var coverHeight = $('#cover').height();

        $('#cover').animate({'height': coverHeight - newMenuHeight}, 600, 'linear');
    }); 
});

The 600 is the speed of the transition in milliseconds, that can be changed to suit. This is slightly more complicated than the example you gave as I decided that it would be useful to show how to deal with a variable height menu. If the menus are fixed height, you could do away with the calculations for the height and just use the open and closed heights.

patrcik dw made an excellent example for starting, any way you said:

goes up revealing the new content

So here is just an idea to get you going with this:

javascript:

$('p').hide();
$('a').click(function() {
    $('#door').animate({top:0}, 500, function() {
        $(this).animate({top: -200}, 500);
        $('p').show();
    });
});

HTML:

<a href='#'>click me</a>
<div id='container'>
    <div id='content'>
        <p>some content to display</p>
    </div>
    <div id='door'></div>
</div>

CSS:

#container {
    width: 200px;
    height: 300px;
    clip: auto;
    overflow: hidden;
    position: relative;
}
#content {
    width: 100%;
    height: 200px;
    background: yellow;
    position: absolute;
    bottom: 0;
}
#door {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -200px;
    background: black;
}

It is exactly the same as patrcik´s code with the hide() and show() functions.

Good luck!

Try it here