animation - スライド アニメーションの複数の div の切り替え

Question

ページの下部に 3 つの div があり、それぞれにリンクがあります。

私がやろうとしていること

リンクをクリックすると、div が 400 ピクセル上にスライドし、#maincontent がフェードアウトし、他の 2 つのいずれかが開いている場合は下にスライドするため、一度に 1 つだけが完全に表示され、何も開いていない場合は #maincontent がフェードします戻る。

クリックイベントでアニメーションを上下させることはできますが、他の人を元の位置に戻すことはできません。

どんな助けでも大歓迎です。

html

    <div class="poolbox1"><a class="poolview1" href="#"></a>content</div>
    <div class="poolbox2"><a class="poolview2" href="#"></a>content</div>
    <div class="poolbox3"><a class="poolview3" href="#"></a>content</div>

CSS

.poolview1{ float:right; margin-top:-25px; display:block; width:31px; height:31px; background-image:url(images/accept.png); background-repeat:no-repeat}
.poolbox2{width:300px; float:left; height:400px; background-color:#666666; margin-top:-20px;opacity: 0.9; filter: alpha(opacity=90);} 

jquery

$(".poolview1").click(function(){
     $(".poolbox1").animate({
          marginTop: "-=400px",          
          height: "+=400px"
    }, 1000);
     $(".poolview1").fadeOut(1000);
     $("#maincontent").fadeOut(1000);
});

$(".poolview2").click(function(){
     $(".poolbox2").animate({
          marginTop: "-=400px",          
          height: "+=400px"
    }, 1000);
     $(".poolview2").fadeOut(1000);
     $("#maincontent").fadeOut(1000);
});

$(".poolview3").click(function(){
     $(".poolbox3").animate({
          marginTop: "-=400px",          
          height: "+=400px"
    }, 1000);
     $(".poolview3").fadeOut(1000);
     $("#maincontent").fadeOut(1000);
});

Answer 1

動作するデモ

html

<div id="poolbox1" class="poolbox"><a id="poolview1" class="poolview" href="#">poolview1</a>content</div>
<div id="poolbox2" class="poolbox"><a id="poolview2" class="poolview" href="#">poolview2</a>content</div>
<div id="poolbox3" class="poolbox"><a id="poolview3" class="poolview" href="#">poolview3</a>content</div>​

CSS

.poolview{float:right; display:block; width:31px; height:31px; }
.poolbox{width:150px; float:left; height:400px; background-color:#666666;opacity: 0.9; filter: alpha(opacity=90);} 

jquery

$(".poolview").click(function(){
     $(".poolbox").animate({
          marginTop: "400px",          
          height: "0px"
     }, 1000);
     $(this).parent().animate({
          marginTop: "0px",          
          height: "400px"
     }, 1000);
     $(".poolview").fadeIn(1000);
     $(this).fadeOut(1000);
     $("#maincontent").fadeOut(1000);
});​