see the Spry Blind sample page here:
blind_sample.html
The target element can initially be hidden. To hide an element you can use one of two CSS properties: display and visibility. The difference between these two properties is the way it will alter the flow of the page. While using the display: none; the element is completelly removed from page and the other elements take its place on the page. The visibility: hidden will leave the element in the page flow but the element is simply not seen.In the following sample we will use the visibility: none; to initially hide the element and using the Blind effect, the element will appear on the page.
<style type="text/css">
.animationContainer{
height: 220px;
}
.hideInitially{
visibility: hidden;
}
</style>
...
<form method="get" action="blinds_sample.html">
<input type="button" onclick="blind_hidden.start();" value="Blind Example Hidden" />
</form>
<div class="animationContainer">
<div class="hideInitially" id="slideItDown_hidden">
...
</div>
</div>
<script type="text/javascript">
var blind_hidden = new Spry.Effect.Blind("slideItDown_hidden", {duration: 2000, from: '0%', to: '100%', toggle: true});
</script>
