Jump to content

slideDown("slow") equivalent in CSS


Recommended Posts

In playing with a contact form that will "slide down" from a given point in the webpage, and I've found two attractive methods.

CSS seems to accomplish the affect with an animation that carries the contents of my form up and down depending on a toggle button.

I found a similar effect using JQuery's slideDown("slow") or slideUp("slow").

The JQuery seems like a smoother effect as it appears to 'unravel' but I am less comfortable with JQuery and connecting to outside libraries.

Can this effect be duplicated more readily with CSS?

Is there a simplified JQuery (or a plain JavaScript) method that I haven't found?

Link to comment
Share on other sites

It's not really a problem as I think a slightly different effect.

CSS seems to slide the entire form into place like moving a cracker from behind a box, and JQuery seems to 'unravel' like a paper towel roll that falls from a table.

If necessary, I will try to post code when time permits.


Link to comment
Share on other sites

In most CSS setups, there's a containing div set with 'overflow: hidden' and an animated height - this then reveals the contents of any nested elements. AFAIR jQuery affects the height of not only the containing div, but the nested elements. So it makes sense that there's a difference in appearance - I'm not aware of a CSS-only solution that will do the "un-squishing" you can (as I recall, will) see with jQuery.

That having been said, whether you're concerned about injection vulnerabilities or server downtime using a CDN-based version of jQuery, you pretty much don't need to be. As long as you're using (for instance) jsDeliver, cdnjs, or code.jquery.com, you can be reasonably assured that it's safe and reliable. And of course if the idea still bothers you, just download the file and include it directly from your own server.

Funny aside - I didn't realize jQuery was still under active development until last week when I saw the v4 beta announcement.

Edited by maxxd
Link to comment
Share on other sites

Thanks for the info, but I may have gotten a better handle on this (versus my unconventional description of the effect I'm trying to duplicate).

It seems that the CSS collapse effect make be more in line with my goal.

I'm going to compare the different sample codes for slide, collapse, and JavaScript to find a solution that gives me a form that kinda unravels down/up over the existing page text via a toggle click.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.