<h4>Slide In</h4>
<p>A Function for Slowly Revealing a Hidden Element by Increasing Its Height Over a
Matter of One Second.</p>
<pre data-sub="prettyprint:_">
function slideDown( elem ) {
// Start the slide down at 0
elem.style.height = "0px";
// Show the element (but you can see it, since the height is 0)
show( elem );
// Find the full, potential, height of the element
var h = fullHeight( elem );
// Were going to do a 20 frame animation that takes
// place over one second
for ( var i = 0; i <= 100; i += 5 ) {
// A closure to make sure that we have the right i
(function(){
var pos = i;
// Set the timeout to occur at the specified time in the future
setTimeout(function(){
// Set the new height of the element
elem.style.height = (pos/100)*h + "px";
//elem.style.height = (pos/100)*h) + "px";
},
( pos + 1 ) * 10 );
}
)();
}
}
// A function for hiding (using display) an element
function hide( elem ) {
// Find out what its current display state is
var curDisplay = getStyle( elem, 'display' );
// Remember its display state for later
if ( curDisplay != 'none' )
elem.$oldDisplay = curDisplay;
// Set the display to none (hiding the element)
elem.style.display = 'none';
}
// A function for showing (using display) an element
function show( elem ) {
// Set the display property back to what it use to be, or use
// 'block', if no previous display had been saved
elem.style.display = elem.$oldDisplay || '';
}
</pre>
<h4>Fade in</h4>
<p>
A Function for Slowly Revealing a Hidden Element by Increasing Its Opacity Over a
Matter of One Second
</p>
<pre data-sub="prettyprint:_">
function fadeIn( elem ) {
// Start the opacity at 0
setOpacity( elem, 0 );
// Show the element (but you can see it, since the opacity is 0)
show( elem );
// Were going to do a 20 frame animation that takes
// place over one second
for ( var i = 0; i <= 100; i += 5 ) {
// A closure to make sure that we have the right i
(function(){
var pos = i;
// Set the timeout to occur at the specified time in the future
setTimeout(function(){
// Set the new opacity of the element
setOpacity( elem, pos );
}, ( pos + 1 ) * 10 );
})();
}
}
// Set an opacity level for an element
// (where level is a number 0-100)
function setOpacity( elem, level ) {
// If filters exist, then this is IE, so set the Alpha filter
if ( elem.filters )
elem.style.filters = 'alpha(opacity=' + level + ')';
// Otherwise use the W3C opacity property
else
elem.style.opacity = level / 100;
}
</pre>