Question

Hi I’m looking for a quick and easy solution to the following:

I have a division tag that is three times the width of the cell (so my visible cell/div will be 200px but the content will be 600px) it needs to be displayed in and I would like it to do the following:

--------------------------
|        |       |       |
|    1   |   2   |   3   |
|        |       |       |
--------------------------

Initially I would like to see 1 then when the user clicks on a link in 1 it should slide to 2. When on 2 the user would be presented with a simple 2 field form for name and phone number. When the user clicks the submit button I would like it to send the form then slide across to 3 which will be a thank you message before sliding back to 1 after X number of seconds.

I feel that it should be easy and feel that it should be very simple to implement but only started using jQuery recently so still getting my head around it all!

Any help would be appreciated.

Answer 1

Assuming you can handle the needed html/css yourself jQuery’s animate should enable you to do what you want.

When click in 1

$(elm).animate({left: '+=200'}, 2000); /* time in ms the transition from 1 to 2 should take */

Assuming on 2 you got a form element

You need to capture the submit event with bind() on the form and prevent the default action and instead submit the data in background using jQuery.post(). At the same time do the animation again to get from 2 to 3

$(elm).animate({left: '+=200'}, 2000).delay(5000).animate({left: '-=400'}, 1000);
//this goes from 2 to 3 in 2s displays 3 for 5s and then goes back to 1 in 1s