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

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

的deminsions

 <div class="box-container clearfix">

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

Answer 3

你可以检查宽度和宽度。高度与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

Answer 4

你需要的是窗口的视口，我有一个函数juste

// 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/，或者只是google“viewport javascript”;）

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

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

4 个答案: