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

- 編輯： 只是「賣場」，以設置回原來的大小。