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

Question

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

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

我这里有jsfiddle代码.我试图让它从中心的起点平滑地进行动画制作,填满屏幕,然后像开始那样向后回到它的起始位置.

Answer 1

pinouchon 使用的另一种没有额外 div 的方法。jsFiddle 在这里：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，3 月前
查看次数：	6982 次
最近记录：	10 年，8 月前