jquery - 用于将 div 扩展到屏幕的 100% 的 Css/jQuery 动画

Question

我正在尝试为一些以象限格式布局的 html 元素创建动画。单击每个 div 时，我希望它们扩展到容器高度和宽度的 100%，然后再次单击时折叠回其初始大小。这是一个类似于浏览器最大化和折叠回原始大小的动画。

我目前的工作正常，我只是希望动画不会将其他元素推离屏幕，并且当标题消失时它也不会跳转。

我该怎么做？随意使用 jQuery 动画或 css3 动画。谢谢!

这是我目前拥有的演示:JSFIDDLEJavascript

$(document).ready(function () {

    $('.box1').on('click', function() {

        $(this).animate({height: "100%", width: "100%"}, 500);

    });

});

HTML

<div id="page-wrapper">

    <div class="header"></div>
    <div class="box-container clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

</div>

CSS

#page-wrapper {
    width: 400px;
    height: 480px;
    border: 1px solid lightblue;
}

.box-container {
    width: 100%;
    height: 100%;
}

.header {
    background: black;
    height: 40px;
    width: 100%;
}

.box1{
    background: yellow;
    height: 190px;
    width: 170px;
    margin: 10px;
    float: left;
} 

.box2 {
    background: red;
    height: 190px;
    width: 180px;
        margin: 10px;
    float: right;
}

.box3 {
    background: green;
    height: 190px;
    width: 170px;
    margin: 10px;
    float: left;
} 

.box4 {
    background: blue;
    height: 190px;
    width: 180px;
    float: right;
    margin: 10px;
}

Answer 1

到目前为止，我已经有了这个，它有点乱，还没有动画，但我的动画是裸露的，我会很快发布一个动画编辑。

http://jsfiddle.net/48vh9/24/

jQuery

 $(document).ready(function () {

    var full = 0;
    var thisBox;
    var d = {};
    var speed = 900;
    $('.box').on('click', function() {
        thisBox = $(this);
        console.log($(thisBox)[0]);
        if(full === 0){
            $('.box').each(function(){
                if($(this)[0] != $(thisBox)[0]){
                    $(this).fadeOut(1);                     
                }                  
            });
            d.width = "100%";
            d.height = "100%";
            $(this).animate(d,speed,function(){
                $(this).css("top","0px");
                $(this).css("left","0px");
                $(this).css("margin-left","0px");
                $(this).css("margin-top","0px");
                $(this).css("position","absolute");
                }); 
            full = 1;
        }
        else{

            d.width = "170px";
            d.height = "190px";
            $(this).css("position","");
            $(this).css("margin-left","10px");
            $(this).css("margin-top","10px");
            $(this).animate(d,speed,function(){ 
                                       $('.box').each(function(){
                if($(this)[0] != $(thisBox)[0]){
                    $(this).fadeIn("fast");                     
                }                  
            });  });


            full = 0;
        }

    });

});

我还更改了 html 以使每个框都具有 .box 类。