Slide In
A Function for Slowly Revealing a Hidden Element by Increasing Its Height Over a Matter of One Second.
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 || ''; }
Fade in
A Function for Slowly Revealing a Hidden Element by Increasing Its Opacity Over a Matter of One Second
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; }
No comments:
Post a Comment