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);
        });
});


});

在窗口调整大小时将div的高度缩放到预定高度

1 个答案: