슬라이드 애니메이션 여러 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); 
});​