Question

I am wondering if someone could help me with a jquery loop or script. When a button is clicked i woud like to animate a div to slide across the screen, when clicked again another div slides down. When the button is clicked AGAIN another div and so on, so on.

Here is the html mark up ive done so far

<div class="page-container">

<h2 class="gallery-heading"> WAIKANAE BEACH HOUSE </h2>
    <img src="images/waikanae/next button.png" id="gallery-next"/>


    <div id="slider">

      <section class="horizontal-gallery">
        <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
        <p class="horizontal-gallery-text">Test text.</p>
      </section>

      <section class="vertical-gallery">
        <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
        <p class="horizontal-gallery-text">Test text.</p>
      </section>

      <section class="horizontal-gallery">
        <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
        <p class="horizontal-gallery-text">Test text.</p>
      </section>

    </div> 

$('#gallery-next').click(function() {
   $('.horizontal-gallery').hide('slide',{direction:'left'},1000);
});

Answer 1

Based on what you described, you’ll need:

$('div selector').hide('slide',{direction:'right'},1000);

And also:

$('button').click(function() {
   //sliding code
});

See: http://docs.jquery.com/UI/Effects/Slide
And: http://api.jquery.com/click/