1

トグル アニメーションを使用して、div の高さを変数値から auto にアニメーション化したいと考えています。変数を適切に呼び出していないことはわかっています。これを行う方法を確認しようとしています。

var scheight = $('.searchcontainer').height();
$('.searchcontainer').toggle(
    function () {
        $(".searchcontainer").animate({ height: scheight + "px" }, 500);
    },
    function () {
        $(".searchcontainer").animate({ height: auto}, 500);
    }
);
4

1 に答える 1

0

「searchcontainer」要素内にコンテンツ用の別のコンテナを配置すると、両方の方法で簡単にアニメーション化できます。このアプローチにより、コンテンツの高さを検出できるようになり、そのピクセル値を持つことで (「自動」に頼るのではなく)、アニメーション化できるターゲットが得られます。

http://jsfiddle.net/XdPry/3/

html:

<div style="height:200px;border:1px solid #000000">
    <div class="searchcontainer" style="background-color:#aa22aa">
        <div>content</div>
    </div>
</div>​

jquery:

$('.searchcontainer:first').toggle(
    function () {
        $(this).animate({ height: parseInt($(this).parent('div').height()) }, 500);
    },
    function () {
        $(this).animate({ height: parseInt($(this).children('div:first').height()) }, 500);
    }
);​
于 2012-06-12T20:20:01.800 に答える