4

これがうまくアニメーション化する理由を誰かが知っていますか:

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

つまり、固定の高さですが、これはまったくアニメーション化されませんか?

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

サイズは引き続き自動に変更されますが、アニメーションはなく、スナップするだけです。

私のコード:

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>

フェードイン/フェードアウトするさまざまな div があり、それぞれに異なる高さが必要です。ページの幅も動的ですが、アニメーションは必要ありません。ビューポートで伸縮するだけです。

ありがとう。

4

4 に答える 4

7

デモhttp://jsfiddle.net/zbB3Q/

Animateは終了の高さを知りません。取得してからアニメートする必要がありますが、そのためには、高さをすばやく設定して、アニメートする前の状態に戻す必要があります。

function setContainerHeight() {
    var heightnow=$(".pagecontainer").height();
    var heightfull=$(".pagecontainer").css({height:'auto'}).height();

    $(".pagecontainer").css({height:heightnow}).animate({
        height: heightfull
    }, 500);
}
于 2013-03-13T18:44:55.377 に答える
2

経験から、私はこれと同じ問題を抱えていましたが、アニメートすることはできませんauto。ただし、事前にコンテナの高さを取得して、それにアニメーション化することはできます。例えば。

function setContainerHeight() {
    newHeight = $('.pagecontainer').height();
    $(".pagecontainer").animate({
        height: newHeight
    }, 500);
}
于 2013-03-13T18:44:22.503 に答える
0

この問題に対処する小さなプラグインを作成しました。これは、ここで公開されている Darcy Clarke の方法に基づいて、非常に必要ないくつかの (imo) 改善を加えた、かなり簡単なプラグインです。jQuery をプラグ アンド プレイするだけです。

https://github.com/azaslavsky/jQuery-Animate-Auto-Plugin

于 2014-03-18T07:23:27.317 に答える