I've built a variant on this idea that gives the effect of a venetian blind:
<div id="blindbox">
<img src="../../images/sockfather.jpg" />
<p>The Sockfather</p>
</div>
<a href="#" onclick="horizontalBlinds('#blindbox');return false;">Click to Close the Blinds</a>
The Sockfather
<style>
div#blindbox {
position: relative;
width: 300px;
border: 1px solid black;
text-align: center;
}
div.slat {
background: white;
display: block;
position: absolute;
z-index:5;
height:100%;
width: 100%;
}
</style>
As each slat is added, we set its height to zero with CSS and also set its top to immediately below the previous slat. Also note that left is set to zero - this is for Internet Shit-plop Plorer support:<script language="javascript">
var slatCount = 6;
function horizontalBlinds(elementSelector) {
var currentTop = 0, count;
var containerHeight = $(elementSelector).height();
// Determine height of each blind slat
var slatHeight = Math.floor(containerHeight / slatCount);
var slatLeftOverHeight = containerHeight - slatHeight * slatCount;
// Add all the blind slats
for (count = 0; count < slatCount; count++) {
$(elementSelector).prepend($('<div id="slat' + count + '" class="slat"></div>').css({ height: 0, top: currentTop + 'px', left: '0px' }));
currentTop += slatHeight;
}
// Animate each slat to 'shut' the blind
for (count = 0; count < slatCount; count++) {
if (count == slatCount - 1)
actualHeight = slatHeight + slatLeftOverHeight;
else
actualHeight = slatHeight;
$('#slat' + count).animate( {height: actualHeight + 'px'} );
}
}
</script>
Once all the slats have been added, we iterate through them all again, firing off the closing blind effect by using JQuery's animate() function to expand each slat's CSS height. 
Dany
11:51 am, Wednesday, 7 September 11