Question

我正在尝试设置div的动画以填充屏幕，然后再次恢复原始大小。但是，当我使div填充屏幕时，它不会从中心动画，它从右上角开始。此外，当我最小化它时，它不会返回到起始位置而是返回到左上角。

我有jsfiddle code here。我试图让它从中心的起点平滑地进行动画制作，填充屏幕，然后像开始那样向后移动到起始位置。

Answer 1

我建议你的移动div总是position: relative;，并且包含在position: absolute;的div中，并且他居中this way

以下是您想要的工作示例：http://jsfiddle.net/FP2DZ/。

Answer 2

没有pinouchon使用的额外div的另一种方法。 jsFiddle is here：

<html>
    <head>
        <script type="text/javascript">
            var isFullscreen = false;

            function fullscreen(){      
                var d = {};
                var speed = 900;
                if(!isFullscreen){ // MAXIMIZATION
                    d.width = "100%";
                    d.height = "100%"; 
                    isFullscreen = true;
                    $("h1").slideUp(speed);
                }
                else{ // MINIMIZATION            
                    d.width = "300px";
                    d.height = "100px";            
                    isFullscreen = false;
                    $("h1").slideDown(speed);
                }
                $("#controls").animate(d,speed);            
            }

        </script> 
        <style> 
            #controls{
                width:300px;
                height:100px;
                margin: auto auto auto auto;
            }   
            body, html{
                height:100%;
            }

        </style> 

    </head>
    <body>
        <h1 align=center> Header (To be covered on Fullscreen) </h1>
        <div id='controls' style="background-color:green;" align="center">
            <input type='button' value='fullscreen' onclick='fullscreen();' />
        </div>
    </body>
</html>

Answer 3

我认为这就是你想要的：

<html>
    <head>
        <script type="text/javascript">
            var isFullscreen = false;

            function fullscreen(){

                var d = {};
                var speed = 900;
                if(!isFullscreen){ // MAXIMIZATION

                    d.width = "100%";
                    d.height="100%";                    
                    d.left="0%";
                    d.top="0%";
                    d.marginLeft="0px";

                    $("#controls").animate(d,speed);
                    isFullscreen = true;

                }else{ // MINIMIZATION

                    d.width="300px";
                    d.height="100px";
                    d.left="50%";
                    d.top="50%";
                    d.marginLeft="-150px";


                    $("#controls").animate(d,speed);
                    isFullscreen = false;
                }

            }

        </script> 
        <style>
            #controls{
                width:300px;
                height:100px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -150px;
            }
        </style>
    </head>
    <body>
        <h1 align=center> Header (To be covered on Fullscreen) </h1>
        <div id='controls' style="background-color:green;" align="center">
            <input type='button' value='fullscreen' onclick='fullscreen();' />
        </div>
    </body>
</html>

但我想我有点晚了;）

jQuery：如何动画一个居中的div来填充屏幕，同时它仍然居中？

3 个答案: