Showing and hiding a form panel using jQuery. Best way to do it?

[analogmonkey]

Hi Everyone,

In the site i’m building i’ve got a form that opens and closes using a simple jQuery button toggle class. The form is used so people can email and share the page with friends, colleagues etc.

Currently the toggle just adds the class so it’s either display:block or display:none. At the moment it’s dull, no animation just basic open and close.

I was looking at CSS3 animation but using the display:block, none cause a problem as that takes residence over the animation rendering that useless. I’ve looked at other examples but these seem to animate using heights which would cause an issue with the responsive aspect of the site/form.

Am I going about this the wrong way? Should I look at a more complex jQuery implementation that calculates the height and also use that library for animation?

Any suggestions?

[Paulie_D]

Why not use something like fade or slidetoggle.

Both of which take delays /animations.

There are plenty of others – http://api.jquery.com/category/effects/

If you’re worried about layout being affected…perhaps a modal or absolute positioning might be more appropriate.

[analogmonkey]

Ah great, I will have a look at those. I did look at slidetoggle, I was just slightly side tracked with CSS3 as it seems alot is done with that these days.

I haven’t a massive amount of experience in either, so wonder what to use sometimes.

Yes I said an Modal would be a better solution, but they didn’t like that idea and wanted to go ahead with the form in the page.

[Shikkediel]

If you look at the list Paulie linked to, fadeTo is one that only animates opacity. So that won’t ever influence page flow. A regular fadeOut for example will also add a display: none at the end.

[Author]

Posts