Animation

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