How to make a sliding door effect?

Here's a basic example to get you started: Try it out: 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 content display 1 content display 2 content display 3 content 1 content 2 content 3 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; }.

I was looking for something like that – MyHeadHurts Nov 17 '10 at 18:40 1 @NEW: I just made it. It's really very simple. – user113716 Nov 17 '10 at 18:44 The only thing this is missing is the switching of the old and new content when the "door" is completely "closed".

– jball Nov 17 '10 at 18:50 @jball - Good point. Updating. – user113716 Nov 17 '10 at 19:15.

$("#elementId"). Click(function(){ $(this).slideUp(); }); slideDown() is the reciprocal.

3 Obligatory documentation reference link. – Phrogz Nov 17 '10 at 18:33 3 slideUp() will hide the element making display: none, the effect show on the website is a moving div, not a disappearing one. – Marcus Whybrow Nov 17 '10 at 18:37 Yes.

Hence slide being in the name. The point is that once the animation is finished the div needs to stay visible and maintain the same height throughout, another reason why slideUp() is inappropriate. – Marcus Whybrow Nov 17 '10 at 18:49 @Marcus Whybrow, sorry to make you look like you're talking to yourself.

I posted my comment, realized what you meant, and deleted it before I saw that you had written a response. – jball Nov 17 '10 at 18:51 Haha no problem. – Marcus Whybrow Nov 17 '10 at 18:58.

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.

Sorry I am really new at this – MyHeadHurts Nov 17 '10 at 18:39 No problem, my code is quite general. JQuery first selects the div which you wish to move (on the first line of code) then binds a function to be executed when a click even occurs on than div. When it does the function code decides whether to animate this (which is the moving div which the click event is bound to down or up.

You will have to decide these boundaries yourself of course. – Marcus Whybrow Nov 17 '10 at 18:45.

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: let the click event on the button trigger the animation animate() the height increase in the cover from its default size, to completely covering the menu hide() the currently visible menu, and show() the one to be made visible 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): 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 s 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: click me some content to display 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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.