Question

我有一个大型3D旋转木马填满了大部分页面。我希望它在点击事件中向下滑动，而另一个div向上滑动以占据相同的位置。

基本上，将有三个旋转木马（每个幻灯片的数量不同，并且具有独特的内容），并且每个旋转木马都有自己相应的按钮，可以将当前div滑下屏幕并显示点击的div。

到目前为止，我正在使用这个：http://werdnaworks.com/DEMO/

Answer 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。

使用jQuery滑入和滑出div

1 个答案: