0

すべてのアイテムのコンテンツが ajax を介して更新されるメニューがあります (「コンテンツ」div に入れられます)。

    <ul id="menu">
        <li class="gr" on><a href="#">Home</a></li>
        <li class="yel"><a href="#">Products</a></li>
        <li class="bl"><a href="#">Contact</a></li>
    </ul>
    <div class="container">
        <div id="content">
        </div>
    </div>

ajaxで受信したデータを「content」divに入れる関数で、$.ajax success()animate()でdivの高さをリサイズしたい。ここに手順：

  1. 古い「コンテンツ」の高さを取得する
  2. 「コンテンツ」divをajax受信データで更新します
  3. 新しい高さを取る
  4. 身長差を利用したアニメーション。

だから私は書いた：

success : function (data) {
  var contHeight = $("#content").height(); //older "content" height
  $('#content').html(data); //update "content"
  var diffHeight = $("#content").height() - contHeight; //difference from new and old height
  $('#content').animate({height: '+=' + diffHeight + 'px'},500);
}

私は自分のコードを試してみました (alert()デバッグのためにいくつかの関数を使用しました) が、次のことに気付きました: を使用するanimate()と、contHeightデータ更新後の「コンテンツ」の高さと等しくなり (したがって、古い高さは新しい高さと等しくなります)、アニメーションはありません。一方、外してanimate()みると新旧で高さが違います。「コンテンツ」の高さの更新を許可してanimate()いないようです。

4

2 に答える 2

0

アニメーション機能をこれに切り替えてみてください：

$('#content').animate({height: $('#content').height() + diffHeight + 'px'},500);
于 2013-07-09T13:18:23.840 に答える
0

コンテンツ ブロックが float:left; であると確信していますか? ? #content の高さは実際には変わらないかもしれません... float:left; を持つ複数のブロックがある場合 float:none; を持つ親ブロック内。、親ブロックには「実際の高さ」がありません。オーバーフローが表示されているため、子ブロックが表示されました...

<div class="container">
    <div id="content" style="float:left">
        &nbsp;
    </div>
</div>
于 2013-07-09T13:14:35.433 に答える