Javascript 使用jQuery滑入和滑出div

我有一个巨大的3D旋转木马，占据了大部分页面。我希望它在单击事件时从页面上滑下，而另一个div则向上滑到相同的位置

基本上，将有三个转盘（每个转盘的幻灯片数量不同，内容独特），每个转盘都有自己的相应按钮，用于将当前div滑出屏幕并显示单击的div

这就是我目前正在使用的：

您可以将每个

的位置设置为

绝对

，然后使用jQuery设置

top

属性的动画：

animate({top: 'value'}, 'slow'};

html标记示例：

<ul>
    <li><a href="#">Carousel 1</a></li>
    <li><a href="#">Carousel 2</a></li>
    <li><a href="#">Carousel 3</a></li>
</ul>

<div id="carousel-1">Carousel 1</div>
<div id="carousel-2">Carousel 2</div>
<div id="carousel-3">Carousel 3</div>

---

这是示例。

这是我能找到的最接近的解释。虽然，我不能让它为我的生活工作。

$('li').click(function(){
    var ind = $(this).index();

    $('div').each(function(index, element){
        if(index == ind){
            $(this).animate({top: 0},'slow');
        }else{
            $(this).animate({top: '100%'},'slow');
        }
    });
})