slideToggle hide/showと同時にdivをアニメーション化する方法

Question

私は新しいウィンドウで作業しています。ここには、ブラウザウィンドウの上部から連絡先の「タブ」があります。リンクはhttp://www.stefanhagen.nl/testlab/です。タブをクリックすると、連絡先フォームが表示されます（slideToggleを使用）。しかし、連絡先フォームが表示されている間、ユーザーがブラウザウィンドウ内でフォームをプルするかのように、タブを連絡フォームと一緒にスライドします。 slideToggleを使用して、タブをクリックして連絡先フォームを表示するようになりました。タブ自体をアニメーション化するコードはどこに置くのですか？ところで、私は液状のレイアウトを持っているので、すべてのdivに絶対配置を使用するので、タブは通常のように「プッシュダウン」されません。事前にありがとう、そしてここで、これまでの私のjQueryの：

$('div.contacttab').click(function(){ 

$('div.contactform').slideToggle('slow', function(){ 

}); 

Answer 1

彼らがこのように一緒に移動するように、私はその後、（のみ接触タブ示すと）ページにそれを配置するクリックしたときのビューにそれをスライドさせ、その後、フォームと同じコンテナのdivに接触タブを配置することをお勧め：

<div class="contactformulier" style="top: -350px;"> 
    <div id="inputarea" style="height: 350px;"> 
     <form action="php/contactengine.php" method="post"> 
     .... 
     </form> 
    </div><!--closes the #contact-area div --> 
    <div class="contacttab" style="position: relative"><p>Contact</p></div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.contacttab').click(function(e){ 
      e.preventDefault(); 
      // Show Contact Form // 
      if (parseFloat$('.contactformulier').css('top') < 0) 
       $('.contactformulier').animate({'top' : '0px' }, 'fast'); 
      } 
      // Hide Contact Form // 
      else { 
       $('.contactformulier').animate({'top' : '-350px' }, 'fast'); 
      } 
     }); 
    }); 
</script> 

こちらがお役に立てば幸いです。

Answer 2

私は、ラッパーの内側に接触タブと接触フォームのdivを入れて、タブがクリックされたときにラッパーを下にスライドさせたいです。こうすると、タブはフォームdivで移動します。