CODEWITHSUNDEEP
javascriptjqueryhtmlcss
androohendricks
androohendricks

Reputation: 3

Slide divs in and out using jQuery

I have a large 3D carousel filling up most of the page. I want it to slide down off the page on a click event while another div slides up to take the same position.

Essentially, there will be three carousels (each different in amount of slides and with unique content), and they'll each have their own corresponding button to slide the current div down off screen and reveal the clicked div.

This is what I'm working with so far: http://werdnaworks.com/DEMO/

Upvotes: 0

Views: 127

Answers (1)

Mark S
Mark S

Reputation: 3799

You can set each <div>'s position to absolute then animate the top property with jQuery: 

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

sample html markup:

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

And here is the sample fiddle.

Upvotes: 1

Related Questions