jquery - コンテンツをプッシュダウンせずにdivをスライドダウンさせる

Question

ここに例があります

divを下にスライドさせる方法がわかりませんが、divが下にスライドするときに下にスライドしないように、コンテンツを上部に保持します。

これで私を助けてくれませんか？

Answer 1

こういう意味ですか？

http://jsfiddle.net/yGZHC/3/

その場合は、を使用しますposition:absolute。このように、要素の位置は他の要素の位置に影響を与えません。

編集：あなたがやろうとしていることに応じて、relativeより良いかもしれません。

http://jsfiddle.net/yGZHC/5/

EDIT2：それよりもさらに良いのは、高さを動的に使用して、コンテンツを移動する距離を決定することです。このようにして、固定の高さに制限されません。

http://jsfiddle.net/yGZHC/7/

$('#slidenav').animate({
    top: '-'+$(this).height()
}, 200);

$('#open a').toggle(
    function(){
        $('#slidenav').animate({
            top: '0'
        }, 500);
    },
    function(){
        $('#slidenav').animate({
            top: '-4'+$(this).height()
        }, 500);
});

Answer 2

私はあなたが求めていると思うものにそれを修正しました。

http://jsfiddle.net/yGZHC/2/

まず最初に、コンテンツを一番上に置きたいものの下に移動します。

<div id="open">
  <a href="#">slide</a>
</div>
<div id="holder">
  <div id="header">
    <h1>TITLE HERE</h1>
  </div>
  <div id="contact">
  </div>
</div>
<div id="slidenav">
....

次に、slidenavそれを補うためにもう少し上げてください。必要に応じて、表示ボタンがクリックされるまでdivを完全に非表示にすることもできます。

$(document).ready(function() {
  $('#slidenav').animate({
    marginTop: '-480px'
  }, 200);
  $('#open a').toggle( function(){
    $('#slidenav').animate({
      marginTop: '0'
    }, 500);
  },
  function(){
    $('#slidenav').animate({
      marginTop: '-380px'
    }, 500);
  });
});