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

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

你的代码是好的事情是这样的，如果如预期，当你设置的东西100%是它100%的父母我会检查的

<div class="box-container clearfix"> 

的deminsions它不工作。所以看到这个父DIV实际上是在占用整个屏幕

Answer 2

您可以检查时宽度&高度不同于100%这样的：使用jQuery UI的

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

另一个sollution ：

添加这个类在你的CSS

个CSS

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

JS

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

fiddle

Answer 3

我有这个迄今为止，这是一个有点乱，没有动画还没有，但裸与我和我会后即将进行的动画编辑。

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 4

你需要的是窗口的视口，我对那个

// 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”到“宽度”和“高度”，你应该得到的只是什么你要。

看吧http://ryanve.com/lab/dimensions/如果您想了解更多的信息，或者只是谷歌“视口的javascript”）

- 编辑： 只是“卖场”，以设置回原来的大小。