Question

I am trying to make a sliding form button like this, I am not familiar to JQuery please suggest.

The Html :-

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

The Jquery :-

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

The CSS :-

.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%;
}

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

Answer 1

I recommend positioning all the form elements evenly so that you only need to shift everything once per click. That makes your jQuery code much simpler. Using percentages to position your elements will also make things trickier. You may consider using fixed pixel positioning instead. At that point, your JS can be as simple as

$('.slideNext').click(function() {
   $('.slideBox').animate({
     left: '-=150px'
   }, 500);
});​

See this jsFiddle for an example of implementation: http://jsfiddle.net/5aFHk/

I decided to use anchor tags instead of buttons, but either should work fine.