右サイドバーを隠して表示

Question

右サイドバーdivを非表示にするためにjavascriptまたはクエリを作成しようとしています。私が予想していたよりもはるかに困難であることを証明するが、私は近くにいる。

ボタンをクリックしたときにスライドアウトしてから再び全幅にスライドする非表示/表示の右側サイドバーを作成しました。

問題： 「非表示」をクリックした場合： サイドバーが「幅：10px;」にスライドします。余白になるコンテンツ：10px。 「SHOW」をクリックした場合： サイドバーが「width：200px;」になるようにスライドします。コンテンツを「margin-right：200px」に戻します。

私は示すために、JSフィドルを作成しました：

http://jsfiddle.net/6uVvF/

私は顔の本のアニメーションバージョン右サイドバーを達成しようとしています。 別の例もあります：http://www.sidlee.com/

ありがとうございます。

Answer 1

サイドバーにスライドとフェードの効果を作り出すことができました。

サイドバーを非表示にすることができます。私はJavascriptを持っていますが、0に各項目をアニメーション化しています。しかしそれはうまくいく。

ここで働くバージョンを参照してください：

http://jsfiddle.net/glepage/6uVvF/