DIVがjavascriptを使って上下に移動する

Question

こんにちは、 私はdivを下に移動してクリックして（別のdivエリアをクリックして）バックアップしたいと思うウェブサイトを構築しています。 アカウントの画像が入っているページのヘッダー（左から右にロゴ、横長のメニュー、ショッピングカート、勘定記号）が表示されます。

アカウント記号をクリックすると、 （60ピクセル）、別のdiv（アカウントに関連するリンクを含む）をヘッダーの上に表示するようにしました。 私が何かを達成したが、私は実際にそれに満足していないよ：

<script> 
    jQuery(document).ready(function($){ 
     $(".account").click(function); 
      $("#accountbar").slideToggle("slow"); 
      $("#topheader").toggleClass("topheader topheaderdown"); 
      $("#contentarea").toggleClass("content contentdown"); 
     }); 
    }); 
</script> 

1）だから、これが何をするか、新しいアカウントのバー（高さ60ピクセル）とスライドダウン、この1をロードします。ダウン）60PX）

3）また、コンテンツの残りの部分（主コンテンツを表示し、両方のアカウント通常より120個のピクセル低く：

2）それは、トップtopheaderダウン別60PX（CSSスタイルルールを表示しますバーとトップヘッダーが表示されています（デフォルトでは60pxなので、トップヘッダーのみ）

アカウント画像をクリックすると「スムーズに」滑らかにスライドして元に戻ります。

<script> 
    jQuery(document).ready(function($){ 
     $("#account").on('click',function(){ 
      $("#accountinner").toggle(function() { 
       $("#topheaderid").animate({ top: '-=60px' }, 500); 
      },function() { 
       $("#topheaderid").animate({ top: '+=60px' }, 500); 
      }) 
     }); 
    }); 
</script> 

問題1：上記は唯一のダウンさらにtopheaderを移動され、さらに、私はそれをクリックするたびに（と再び60PXまで戻っていない私はここまで（スムーズにtopheader部分を下に移動する）を得ました上のように、上記にも何らかの形で（

）画面のうち、右側に自分のアカウントの画像をスライドさせると私はあまりにもこの中に他のルールを実装したいと思います：

問題2が...）指定されましたトップヘッダーをクリックすると60pxでスムーズに下に移動し、上の方が新しいdiv（アカウントバー）にアカウントナビゲーションが表示され、コンテンツ（クラスのコンテンツ）が下に移動します別の60ピクセル。 "slidetoggle"と "toggleclass"を使用する前に言ったように、私はむしろ "アニメート"機能を持っています。 私は最初のスクリプトからこれらのルールを実装しましたが、明らかに "スムーズに"起こらず、トップヘッダーだけがダウンし続ける... これはうまくいきますか？私はこのボタンをクリックしてトップヘッダーの下に表示される検索ボタンで拡張したいと思います。

https://jsfiddle.net/d14tcb9n

感謝。

Answer 1

あなたが好きなアニメーショントリガすることができます：

jQuery(document).ready(function($){ 
    $("#account").on('click',function(){ 
    if($(this).hasClass('open')) { 
     $("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false }); 
     $("#accountbar").animate({ height: '0' }, { duration: 500, queue: false }); 
     $('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false }); 
     $(this).removeClass('open'); 
    } else { 
     $("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false }); 
     $("#accountbar").animate({ height: '60px' }, { duration: 500, queue: false }); 
     $('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false }); 
     $(this).addClass('open'); 
    } 


    }); 
}); 

が隠しDIVから表示なしを削除しないと0 デモに高さを変更：応答ペルマルためhttps://jsfiddle.net/o1cvho6m/