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

Question

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

我目前的工作正常，我宁愿让动画不要将其他元素推离屏幕，也希望它在标题消失时不要跳转。

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

这是我目前拥有的演示：JSFIDDLE Javascript

$(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 类。

Answer 2

你的代码没有问题，如果它没有按预期工作，我会检查

 <div class="box-container clearfix">

当您将某些内容设置为 100% 时，即它的父级的 100%。所以看到这个父 div 实际上占据了整个屏幕

Answer 3

你需要的是窗口的视口，我有一个专门的功能

// Return visible bounds of window
function viewport()
{
    var e = window, a = 'inner';
    if (!('innerWidth' in window)) {
       a = 'client';
       e = document.documentElement || document.body;
    }
    return {w: e[ a + 'Width' ], h: e[ a + 'Height' ]};
}

您可以将“w”和“h”重命名为“width”和“height”，您应该得到您想要的。

如果你想了解更多信息，请看这里http://ryanve.com/lab/dimensions/，或者只是谷歌“viewport javascript”；）

-- 编辑： 只需“存储”原始大小以便将其重新设置。

Answer 4

您可以像这样检查宽度和高度何时与100% 不同：

$(document).ready(function () {

    $('.box1').on('click', function() {
        if($(this).attr("style") != "height: 100%; width: 100%;")
            $(this).animate({height: "100%", width: "100%"}, 500);
         else 
            $(this).animate({height: "190px", width: "170px"}, 500);
    });

});

fiddle

使用 jquery-ui 的另一种解决方案：

在你的 CSS 中添加这个类

css

.fullsize{
    height:100%;
    width:100%;
    position:absolute;
}

js

$('.box1').on('click', function() {
    $(this).toggleClass("fullsize", 1000)
});

fiddle