3

コンテンツにぴったりのサイズになるように div のサイズ変更をアニメーション化できるかどうかは誰にもわかりませんか? 高さは動的でなければなりません。つまり、ブラウザ ウィンドウのサイズを変更すると、div の高さが増減します。私はすでにビューポートの 80% の動的幅を持っています。

これは現在、コンテナのサイズ変更をアニメーション化するために使用しているもので、サイズ変更部分は機能しますが、アニメーションはサイズ変更のために再生されません。高さを固定の高さに設定したら、次のように言います。

$(".pagecontainer").animate({
    height: '700px'
}, 500);

アニメ化しました。しかし、height: 'auto' を指定すると、アニメーション化されず、単に新しいサイズにスナップするだけです。

JS:

<script>

    function setContainerHeight() {
        $(".pagecontainer").animate({
            height: 'auto'
        }, 500);
    }

    $('.link').on('click', function(e){
        $('.pagecontainer>div').fadeOut(0);
        setContainerHeight();
        $(this.getAttribute("href")).fadeIn();
    });

</script>

CSS:

.pagecontainer {
min-height:450px;
width:80%;
min-width:800px;
padding:50px 0;
margin: 0 auto;
}
.pagecontainer>div{
display: none; /*wait until page needs to be faded in*/
padding-left:50px;
padding-right:50px;
position:relative;
}

HTML:

<div class="pagecontainer">

    <a href="#page1" class="link">page 1</a>
    <a href="#page2" class="link">page 2</a>
    <a href="#page3" class="link">page 3</a>

    <div id="page1">TONS OF TEXT HERE</div>

    <div id="page2">A BIT OF TEXT HERE</div>

    <div id="page3">BUNCH OF IMAGES</div>

</div>

たとえば、ページ1に大量のテキストがあるとします。高さ自体が動的であるため、どの高さになるかわかりません。ブラウザーウィンドウを広げると、明らかに必要な高さが縮小します。ページ 2 にはテキストが少ししかない場合があるため、必要な高さははるかに小さくなります。ページ3にはたくさんの画像がありますが、それらすべてに収まるのに必要な高さがわかりません(これが私の質問のポイントであり、スクリプトに必要な高さを計算させます)。

「.pagecontainer」のサイズを変更して、ブラウザ ウィンドウのサイズを変更しても、その高さが各ページのコンテンツに完全に収まるようにするにはどうすればよいですか? たとえば、page1 をクリックするとコンテナーが拡大し (jQuery の .animate() でアニメーション化)、page2 をクリックするとコンテナーが縮小します。

画像の説明は次のとおりです: http://i.imgur.com/leOeJG0.png

ありがとう。

4

2 に答える 2

2

高さを計算する理由はありません。高さは自動的に変更されます。

jQuery

$('.pagecontainer>div').fadeOut(0);

$('.link').on('click', function(e){
    $('.pagecontainer>div').fadeOut(0);
    $(this.getAttribute("href")).fadeIn();
});

HTML 構造

<a href="#page1" class="link">page 1</a>
<a href="#page2" class="link">page 2</a>
<a href="#page3" class="link">page 3</a>

<div class="pagecontainer">

    <div id="page1">Block One</div>
    <div id="page2"><img src="http://placehold.it/200x200" /></div>
    <div id="page3"><img src="http://placehold.it/300x400" /></div>

</div>

http://jsfiddle.net/daCrosby/tmuC2/

編集

コメントに基づいて、フェードインとフェードアウトではなく、上下にアニメーション化する必要があります. これを行うには、次に示すようにanimate([height:"show",speed)andanimate([height:"hide",speed)を使用します。

    $('.pagecontainer>div').animate({height:"hide"},500);
    $(this.getAttribute("href")).animate({height:"show"},500);

http://jsfiddle.net/daCrosby/tmuC2/1/

于 2013-03-13T00:07:24.210 に答える
1

私が見ているように、この関数は必要ありexpandPageContainer()ません。コンテナが表示されていないときにアニメーションが発生し、高さの絶対値を計算する必要はありません。

関数と関数呼び出しを削除し、expandPageContainer()コンテナー CSS を設定するheight: autoだけで、期待どおりの動作が発生します。高さに関してコンテンツに合わせてコンテナのサイズを変更することは、デフォルトの動作です。margin-bottom(ルールを削除することもできます)

呼び出しfadeOut(0)も と同じhide()です。後者はもう少し効率的です。

于 2013-03-12T23:48:27.473 に答える