I'm working on this project and want to add a "blind down" effect to the translucent content area so that when you click on a link on the left nav, the content portion on the right will roll down and lock into place. I found this script that seems to do what I want but I'm having trouble implementing it. In both IE and FF, it flickers once before it goes down. In IE, it's even worse in that after it finishing scrolling, all of the content disappears. Also, as it scrolls, it sometimes scrolls smoothly but sometimes is jumpy. (To see what I'm talking about, click on 'CSS Zen Garden' -- that's the only one I have hooked up so far.)

I found some bug fixes on the wiki but they didn't help. Any ideas either about how to fix this script and/or another similar script that might work better?

Here's a link to the Javascript file with the main functions, or here's the main function written out:

Code:
Effect.BlindDown = function(element) {
  element = $(element);
  var elementDimensions = element.getDimensions();
  return new Effect.Scale(element, 100, Object.extend({ 
    scaleContent: false, 
    scaleX: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makeClipping().setStyle({height: '0px'}).show(); 
    },  
    afterFinishInternal: function(effect) {
      effect.element.undoClipping();
    }
  }, arguments[1] || {}));
}
Here's the HTML event handler portion:

HTML Code:
<div class="projectHead" onclick="Effect.BlindDown('frogBlind')"><img src="_images/colFrog.jpg" alt="CSS Zen Garden" /><h3><a href="#" onclick="
	showHide('webDescription', 0); 
	showHide('gamesDescription', 0); 
	showHide('appsDescription', 0); 
	showHide('otherDescription', 0);
	showHide('description1', 1); 
	showHide('description2', 0); 
	showHide('description3', 0); 
	showHide('description4', 0); 
	showHide('description5', 0); 
	showHide('description6', 0); 
	showHide('logoDefault', 0);
	showHide('logoFrog', 1);
	showHide('logoSmoky', 0);
	showHide('logoBIR', 0);
	showHide('logoTAL', 0);
	showHide('logoGrandma', 0);
	showHide('logoDocTypes', 0);
	return false; ">CSS Zen Garden</a></h3>
	<ul class="projectItems">
		<li>Concept Note (pdf)</li>
		<li>Change Docs (pdf)</li>	
		<li><a href="http://www.susanlitton.com/school/ai/css/zen/index.html" title="CSS Zen Garden">LAUNCH</a></li>
	</ul>
</div> <!-- end projectHead	 -->		
And here's the div that's being targeted:

HTML Code:
<div class="projectContentWrapper" id="frogBlind">
	<div class="projectContentHeader"><h1>CSS Zen Garden</h1></div>
	<div class="projectContentBody">
		<h2>Goals</h2>
			<p>The goal of this particular project was to take existing page of HTML and create an entirely new layout and design using only CSS. The HTML was not modified in any way.</p>
		
		<h2>Details</h2>
			<p>I knew I wanted to create a frog pond design. I wanted the layout to be fluid, much the way a stream might meander around through the terrain. I wanted the background to look as if it was on an old sheet of linen parchment with frayed edges. A challenge was to design the background image so that it was small enough to avoid a long download time yet large enough so that the repetition wouldn't be obvious</p>			
			
		<h2>Skills</h2>
			<ul class="projectContentItems">
				<li>CSS</li>
				<li>Photoshop</li>
			</ul>		
	</div> <!-- end projectContentBody -->
	<div class="projectContentLaunch"><a href="http://www.susanlitton.com/school/ai/css/zen/index.html"><img src="_images/colFrog.jpg" alt="CSS Zen Garden" /> Launch Site</a></div>
</div> <!-- end projectContentWrapper -->