Hide an element without masking item over top

I've created an effect whereby an HTML element is initially hidden behind another HTML element, and the CSS 'top' value of the hidden element is animated to expose it from beneath the masking element in a smooth sliding motion.

Does anyone know if there is a way to recreate this effect without the masking element on top?

I want to avoid 开发者_开发知识库the jQuery'esque slideDown where the height of the element being shown is animated.

I have the feeling that this just isn't possible, but if someone is otherwise aware, your advise would be much appreciated.

---

You can easily do this with a wrapper that has overflow set to hidden

http://jsfiddle.net/xvNf6/1/

HTML

<div id="wrapper" style="height:0px;">
    <div>content</div>
</div>

Sample CSS

#wrapper{width:300px;height:280px;margin:0 auto; overflow:hidden; background:#eee}

Javascript

//if you must not use jQuery
var animationTimer = setInterval(function(){
    var wrapper = document.getElementById("wrapper");
    wrapper.style.height = (parseInt(wrapper.style.height) + 1) + "px";
    if(parseInt(wrapper.style.height) >= 280)
        clearInterval(animationTimer)
},1);

//if you can use jQuery
$("#wrapper").animate({height:"280px"},1000);

---

Place your element within a parent div with overflow:hidden. Then, position your element beyond bounds of the parent div so that it is hidden.

#wrapper { overflow: hidden; }
#target { height: 100px; top: -100px; } /* shift element out of view */

You can then reveal it by animating to {"top":0} to get the slidedown effect that doesn't resize the height of the element.

Here's a rather crude demo: http://jsfiddle.net/7RSWZ/

Update: Here's another demo that attempts to deal better with different content sizes by dynamically setting the heights and top values. http://jsfiddle.net/7RSWZ/2/