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?

@Ziga Can the changing of the div be animated from one value to another? — Zeeno, Aug 22 '11 at 10:15
Yes it can. Take a look at this -- [jQuery.Animated()](http://api.jquery.com/animate/) — , Aug 22 '11 at 10:16
@Ziga how different is JQuery from Javascript? I'm only familiar with Javascript. Is there no Javascript equivalent of .animate()? — Zeeno, Aug 22 '11 at 10:18
@deztructicus the difference between jQuery and Javascript is that jQuery is cross-browser compatible, they are both Javascript in the end but jQuery just makes things work. — JakeJ, Aug 22 '11 at 11:47

score 2 · Accepted Answer · answered Aug 22 '11 at 10:23

2

Use jQuery'sanimate() 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;
        }
    }

answered Aug 22 '11 at 10:23

Luc125

5,752
34
35

Oh no problem. I did research and found out Jquery is actually a library. It works now, I'm just tweaking it a bit. Thanks – Zeeno Aug 22 '11 at 11:55
I have a question though, When minimize it, the div doesn't return to the centre of the window, (it goes to the top left) I'm using "margin: 0 auto" but its not working (It works when I don't do transitions – Zeeno Aug 22 '11 at 12:29
I think it's because `$.animate` does not work with non-numerical property values, like `"0 auto"`. Please try replacing `o.margin="0 auto"; $("#viewer").animate(o,speed);` with `$("#viewer").animate(o,speed); $("#viewer").css("margin", "0 auto");`. – Luc125 Aug 26 '11 at 10:28
Nah I fixed it. It had to do with the way abosolute works. I had to write a function to get the left and right boundaries and set them as the abosolute before animating – Zeeno Aug 26 '11 at 21:03

score 1 · Answer 2 · answered Aug 22 '11 at 10:23

1

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.

answered Aug 22 '11 at 10:23

Ahsan Rathod

5,465
2
21
25

score 0 · Answer 3 · answered Aug 22 '11 at 11:26

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

How do I transition the changing of CSS values?

3 Answers3