javascript - 如何转换 CSS 值的变化？

Question

我正在使用 JavaScript 更改 CSS 值，以便在单击按钮时使特定的 div 填充页面。但我想让从小到充满屏幕的变化变得平滑。如何使用 CSS 或 Javascript 执行此操作？这就是我目前改变那个 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;
            }
        }

我如何编码从全屏值到最小值的变化是平滑的过渡而不是瞬时的？

Answer 1

使用jQuery'sanimate()函数!

例如:

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