幻灯片动画多个 div 切换

Question

我在页面底部有 3 个 div，每个 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

一个工作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);
});​