幻燈片動畫多個div切換

Question

我有3個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

工作demo

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); 
});​