0

ユーザーがブラウザウィンドウのサイズを変更し、少し遅れて簡単なアニメーションを追加したときに、Jqueryを使用してdivの高さをスケーリングするソリューションを探しています。最小の高さを 300 ピクセルにし、ウィンドウのサイズ変更時に 700 ピクセルに拡張できるようにするには <div>、クラスを使用する必要があります。.graph

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

1 に答える 1

0

わかりました。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);
        });
});


});
于 2013-10-22T21:17:04.137 に答える