How do I transition the changing of CSS values?

Question

I'm using JavaScript to change CSS values to make a particular div fill the page when a button is clicked. But I would like make the change from small to filling the screen smooth. How do I do this with CSS or Javascript? This is currently how I'm changing the size of that div

function fullscreen(){  // called when button is clicked

            var  d = document.getElementById('viewer').style;
            if(!isFullscreen){ // if not already fullscreen change values to fill screen 
                d.width = "100%";
                d.height="100%";
                d.position= "absolute";
                d.left="0%";
                d.top="0%";
                d.margin="0 0 0 0";
                isFullscreen = true;
            }else{     // minimizie it
                d.width="600px";
                d.height="400px";
                d.margin="0 auto";
                d.position="relative";
                isFullscreen = false;
            }
        }

How do I code the change from the full screen values to the minimized values to be a smooth transition instead of instantaneous?

Answer 1

Use jQuery's animate() function!

For example:

function fullscreen(){  // called when button is clicked

        var o = {}  // options
        var speed = "fast";  // You can specify another value
        if(!isFullscreen){   // if not already fullscreen change values to fill screen 
            o.width = "100%";
            o.height="100%";
            o.left="0%";
            o.top="0%";
            o.margin="0 0 0 0";
            $("#viewer").animate(o,speed);
            isFullscreen = true;
        }else{     // minimize it
            o.width="600px";
            o.height="400px";
            o.margin="0 auto";
            $("#viewer").animate(o,speed);
            isFullscreen = false;
        }
    }

Answer 2

You can do this by using Jquery, .animate() API see the reference .animate()

I have created a small demo using .animate() click the Demo to see the example.

Answer 3

What you want to do is rather complicated, first you need to get the absolute position and dimension of your element in the document, also the dimension of the document itself, there is no native cross-platform javascript functions for that but there are known techniques to find out those values, do a search. So assuming you will implement these functions yourself: getAbsoluteLeft() , getAbsoluteTop() , getWidth() , getHeight() , getDocWidth() and getDocHeight() here is the animating code (not tested):

function fullscreen(){  // called when button is clicked

    var e = document.getElementById('viewer');
    var d = e.style;  


    if(!isFullscreen){ // if not already fullscreen change values to fill screen 

        var duration = 1000 //milliseconds
        var framesPerSecond = 24;
        var beginLeft = getAbsoluteLeft( e );
        var beginTop = getAbsoluteTop( e );
        var beginRight = beginLeft + getWidth( e );
        var beginBottom = beginTop + getHeight( e );
        var endLeft = 0;
        var endTop = 0;
        var endRight = getDocWidth();
        var endBottom = getDocHeight();

        var totalFrames = duration / (1000/framesPerSecond);
        var frameNo = 0;

        var leftStep = (beginLeft - endLeft) / totalFrames;
        var topStep = (beginTop - endTop) / totalFrames;
        var rightStep = (endRight - beginRight) / totalFrames;
        var bottomStep = (endBottom - beginBottom) / totalFrames;

        var func = function () {
            var left = beginLeft - leftStep * frameNo;
            var top = beginTop - topStep * frameNo; 
            d.left = left+'px';
            d.top = top+'px';
            d.width = (beginRight + rightStep * frameNo - left)+'px';
            d.height = (beginBottom + bottomStep * frameNo - top)+'px';
            ++frameNo;
            if( frameNo == totalFrames ) {
                clearInterval( timer );
                d.width = "100%";
                d.height="100%";            
                d.left="0%";
                d.top="0%";
                isFullscreen = true;
            }
        }

        d.position= "absolute";
        d.margin="0 0 0 0";

        timer = setInterval( func, 1000 / framesPerSecond );


    } else {     // minimizie it
        d.width="600px";
        d.height="400px";
        d.margin="0 auto";
        d.position="relative";
        isFullscreen = false;
    }
}