Nice n' Easy JQuery Image Rotator
Scrollable Tables with Floating Header using CSS
Development Resource Project
JQuery Venetian Blinds Transition Effect
Book Review: How to Implement Design Patterns in PHP
ENUMs, User Preferences, and the MySQL SET Datatype

JQuery Venetian Blinds Transition Effect

Wednesday, 24 August 11, 11:49 am
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:
<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 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:
<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.


11:51 am, Wednesday, 7 September 11

Thanks for sharing, pretty interesting approach. I nearly choked laughing at your name for Internet Explorer - think I'm gonna use that too!!
Leave Comment

/xkcd/ Who?

About This Page