javascripttransparencyfadeno-framework

Javascript: Fade element from specidied opacity to specified opacity?


I am trying to find a function that can fade an element from a specified transparency to a specified transparency. For example from 0 to .7 but everything I can find just fades either from 0 to 1 or 1 to 0. I can't find anything that lets you specify from what to what. My attempts of reverse engineering the functions I have found have also failed as every example I have found has been pretty cryptic.

Also I want to do this WITHOUT any frameworks.

Thanks!!


Solution

  • There is no particular trick to it, you just set the opacity style to something other than 0 or 1 repeatedly in a timeout/interval.

    Here's a stripped down fade function you can use as a starting point.

    <script type="text/javascript">
        function fade(element, o0, o1, t) {
            // IE compatibility. Detect lack of native 'opacity' support, and ensure element
            // has layout for IE6-7.
            //
            var canopaque= 'opacity' in element.style;
            if (!canopaque && 'currentStyle' in element && element.currentStyle.hasLayout===false)
                element.style.zoom= '1';
    
            function setOpacity(o) {
                if (canopaque)
                    element.style.opacity= ''+o;
                else
                    element.style.filter= 'alpha(opacity='+Math.round(o*100)+')';
            }
    
            var t0= new Date().getTime();
            setOpacity(o0);
            var interval= setInterval(function() {
                var dt= (new Date().getTime()-t0)/t;
                if (dt>=1) {
                    dt= 1;
                    clearInterval(interval);
                }
                setOpacity(o1*dt+o0*(1-dt));
            }, 25);
        }
    </script>
    <p id="foo"> hello. </p>
    <button onclick="fade(document.getElementById('foo'), 0.7, 0, 2000);">fade 0.7 to 0</button>