How to Slide Div on Button click
<p>I am trying to make a sliding form button like <a href="http://www.groupon.com/subscriptions/new?division_p=" rel="nofollow">this</a>, I am not familiar to JQuery please suggest.</p>

<p><strong>The Html :-</strong></p>

<pre><code>&lt;div id="introFormHome"&gt;
&lt;form action="" method=""&gt;
    &lt;div id="slideBox1" class="slideBox"&gt;
          Conferm Location &lt;input type="text" value="" /&gt;
          &lt;button class="slideNext"&gt;Continue&lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="slideBox2" class="slideBox"&gt;
          Area &lt;input type="text" value="" /&gt;
          &lt;button class="slideNext"&gt;Continue&lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="slideBox3" class="slideBox"&gt;
          Email Address &lt;input type="text" value="" /&gt;
          &lt;button class="slideNext"&gt;Continue&lt;/button&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p></p>

<p><strong>The Jquery :-</strong></p>

<pre><code>&lt;script type="text/javascript" &gt;
$('.slideNext').click(function() {
   $('.slideBox').animate({
        left: '-50%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#introFormHome');
    });
    $(this).next().animate({
        left: '50%'
    }, 500);
});
&lt;/script&gt;
</code></pre>

<p><strong>The CSS :-</strong></p>

<pre><code>.slideBox {
    position: absolute;
    width: 450px;
    height: 200px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 70%;
    top: 300px;
    margin-left: -25%;
}
#slideBox1 {
    background-color: blue;
}

#slideBox2 {
    background-color: yellow;
    left: 150%;
}

#slideBox3 {
    background-color: red;
    left: 150%;
}
</code></pre>

<p>There the css, its working fine if i set to click the div .slideBox{} it slides but not with the above posted script.</p>
