Animation

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;
            }