HTML Data Entry Wizard, Fade and Slide Between Steps

Question

I have a data entry form broken into multiple steps. Each step is on its own div. When filling out the form, I would like to have a nice transition between each step where the current step/div fades out, the height of the form is adjusted to the correct height for the next step/div and then the new step/div fades in.

This would work something like "Lightbox" but would not be in a modal popup.

Also similar to this Sliding Form but there will only be "Next" and "Previous" buttons on the bottom and not a tab for each step.

Does a JavaScript library like this already exist, or is my best option to set each div to style="display: none;" and combine .slideDown() and .fadeIn()?

Answer 1

If you want with Next and Previous buttons here is very good demo.

And Here is the link of GitHub for above jquery plugin

Answer 2

I have used jQuery Steps with a lot of success

It is extremely polished, provides validation per step, and it very customizable.