4

クリック機能をトリガーするときにdivアニメーション化する があります。height

$('#menu').click(function() {
  $('#test').animate({
      height: 'toggle'
    }, 290, function() {    
  });
});

これまでのところうまくいきます。しかし、このフィドルdivに見られるのとは異なり、下から上にアニメーション化したいと思います。

解決策はありますか？

4

1 に答える 1

12

コンテナに入れて絶対に配置できますか?:

HTML:

<a href="#" id="menu">click me for menu</a>
    <div id="cont">
    <div id="test"></div>
</div>

CSS:

#cont{
    height:500px; width:50px; position:relative;
}
#test{
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0;
}

JavaScript:

$('#menu').click(function() {
    $('#test').animate({
        height: 'toggle'
        }, 290, function() {
    });
});

フィドル

編集: なぜ機能する
のか メニューの周りにコンテナを配置し、 style を指定しましたposition:relative。私がメニュー ( ) であると想定しているものには、含まれている要素に対して、、およびに従って配置できることを意味する#testスタイルが与えられています (デフォルト以外の要素がある場合は、コンテナーに位置を与えます)。要素に a を指定すると、要素の左上が親の左上に固定されます。同様に、この要素の左下が親の左下に固定されます。とりとめのないですね。要約すると、position:absolutetoprightbottomleftpositionrelativetop:0;left:0top:0;bottom:0#test親の下部に「スタック」しているため、下部からアニメーション化されます。もう 1 つの簡単なポイントは、コンテナーの高さです。絶対位置を指定したため、コンテナーがその高さまで押し上げられることはありません。そのため、コンテナーの上部から 500px#testを確実にロードするように高さを設定します。#test

于 2013-03-22T13:42:02.517 に答える