jquery - 在窗口调整大小时将 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 animate 和一些 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);
        });
});


});