オブジェクトを非表示にする/折りたたみエフェクトを作成する

Question

私はかなりユニークなエフェクトを作成しようとしています。実際にはそれほど複雑ではありません。私がやっていることは、既に行っている実験的なサイトを作ることです。私は最後のステップをやり遂げる方法を理解できないようです。

だから、これは私がhttp://www.dig.ital.me/sandbox/about-me/

いじりそして、何私がやろうとしているが、その中にテキストを持っている左サイドバーを折りたたむですよ、私のサイトです：「何とか何とか何とか製など" 「これを隠すにはこれをクリックしてください」をクリックします。

私は名前リンクに関連付けられたアンカーリンクを実行し、そのリンクをクリックすると、ディスプレイを呼び出すことを試みました。しかし、それは動作していません。だから私は、それが崩壊した場所でこのような効果を達成する方法について、スタックオーバーフローを試みることを考えました。

#hide-option { color:#FFF; width:500px; height:500px; padding-left:170px;} 
#hide-option:hover .fixedfooter { 
display:none; 
cursor:pointer; } 

hide-option div idのスニペットです。私はこの効果を試して達成するために多くのルートを使い果たしましたが、それを理解する方法はわかりません。 ：onClickクラスとnth-childクラスを試しましたが、何も動作していないようです。

Answer 1

// Store the footer as a variable, so we don't have to keep calling jQuery's selector engine 
// It's slower than a tortoise stuck in a traffic jam. 
var target = $('.fixedfooter'); 

// Every time the hide-option link is clicked 
$('#hide-option a').click(function() { 

    // If the left position of the target is 0 
    if(parseInt(target.css('left')) == 0) { 
     // Check the target is not animated and, if it is, animate off screen 
     !target.is(':animated') && target.animate({left: -751}, 250); 
    } else { 
     // Assume it's hidden, and put it back to the start 
     !target.is(':animated') && target.animate({left: 0}, 250); 
    } 

    // Stop the link being followed 
    return false; 

}); 

Answer 2

JQuery、JavaScriptライブラリは、すべてあなたのためにそれを解決します。

$("el").bind("onclick",function(){$("el").toggle('slow');}); 

Answer 3

あなただけCSS3（あなたがIE6-8を気にしない場合）は、ここにあなたが試みることができる何かしたい場合：http://jsbin.com/isunoz/6/edit

私はできるだけそれをコメントしましたが、私は助けて欲しいと思っています:)

私が行ったことは、サイドバーを表示するかどうかを決定するためにチェックボックス入力を使用することです。

右サイドバーの要素（div.fixedfooter）の前に、チェックボックスの入力要素を入れて、そのチェックボックスのラベルにあなたのアンカー（矢印）を変更することにより、私はを使用することができるよ：疑似クラスをチェックします+セレクタを兄弟要素（この場合はサイドバーdiv.fixedfooter）にターゲティングします。このチェックボックスをオンにすると、サイドバーが画面外に移動し、チェックされていない場合はサイドバーが表示されます（：0）。私はいくつかのCSS3のトランジション（移行：左.4sはを和らげる）使用していたアニメーション用

うーん:)