在窗口調整div的高度到預定高度

Question

我正在尋找一種解決方案，使用jquery縮放div的高度，當用戶重新調整瀏覽器窗口的大小並添加一個輕鬆動畫時，略有延遲。我需要<div>與.graph類別的最小高度爲300px，並且能夠在窗口重新大小上增長到700px。

HTML

<div id="slide1" class="current"> 

    <div class="graph resize"> 
    This is where a SVG graph would go 
    </div> 

</div> 

CSS

body,html{ 
margin:0; 
height:100%; 
} 

.current{ 
height:100%; 
min-height:750px; 
position:relative; 
background:#ccc; 
padding:5px; 
} 

.graph{ 
position:absolute; 
width:950px; 
min-height:300px; 
background:#fafafa; 
box-shadow: 0 1px 0 1px #DAD8D8; 
} 

Answer 1

好吧，我想通了。玩過jQuery的動畫和一些CSS屬性後，我有一個非常流暢的腳本工作。

如果任何人想看到它的工作，我已經包括一個小提琴。

JSFIDDLE

$(document).ready(function(){ 

$(window).resize(function(){ 

$('.className').css({ 
position:'absolute', 
left: ($("#slide2, #slide3, #slide4").width() 
- $('.className').outerWidth())/2, 
top: ($(window).height() 
- $('.className').outerHeight())/2 
}); 

}); 

// To initially run the function: 

$(window).resize(); 

$(window).on('load resize', function(){ 
$('.className').animate({height: $(window).height()-$('.className').height()/2},300, 
function(){ 

     setInterval(function() { 

     $(".className").css({ 
     top: ($(window).height() 
      - $('.className').outerHeight())/2, 
     }); 

     }, 0); 
     }); 
}); 


});