JQuery Venetian Blinds Transition Effect
Wednesday, 24 August 2011, 1:00 pm
JQuery has a few transition animations built in, such as the 'blinds' effect. This lets you unhide content by revealing it as if a blind were being pulled open in front of it, and vice versa to hide content.
I've built a variant on this idea that gives the effect of a venetian blind:
Click to Close the Blinds
The element to be hidden should have CSS position absolute or relative so that the slats can be correctly positioned over it. The slats themselves are implemented as divs, with absolute position:
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. Related Articles
Nice n' Easy JQuery Image Rotator Going Back in History with AJAX and HTML5 Symfony 2 Crash Course A Simple ISAPI Filter for Authentication on IIS How To Make a Firefox Add-on Development Resource ProjectArticles from Other Sites
Gabriele Romanato's weblog Merging Image Boxes with jQuery Overview of OOP in JavaScript Java game development framework with a unified API supporting Android/iOS/Javascript Neat CSS3 + HTML5 Animation JavaScript Box2D hits the browser/xkcd/ Speedrun
Dany
5:51 pm, Wednesday, 7 September 2011