使用 jQuery 将 div 滑入和滑出

【问题标题】：Slide divs in and out using jQuery使用 jQuery 将 div 滑入和滑出
【发布时间】：2013-11-17 08:29:52
【问题描述】：

我有一个大型 3D 轮播，占据了大部分页面。我希望它在单击事件时从页面上滑下，而另一个 div 向上滑动以占据相同的位置。

基本上，会有三个轮播（每个轮播的幻灯片数量和内容都不同），每个轮播都有自己对应的按钮，可以将当前 div 滑出屏幕并显示点击的 div。

这是我目前正在使用的：http://werdnaworks.com/DEMO/

【问题讨论】：

这与我能找到的解释差不多。虽然，我无法让它为我的生活工作。 tinyurl.com/mbas49g

标签： javascript jquery html css

【解决方案1】：

您可以将每个<div> 的位置设置为absolute，然后使用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>

jQuery:

$('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');
        }
    });
})

这里是示例fiddle。

【讨论】：