jQuery show/hide doesn't keep free space for elements

Question

Currently I'm creating a website for a clothing company with use of HTML, CSS and JS. I wanted to create nice landing page with elements showing one by one like in presentation.

First of all I tried using jQuery functions .hide() at the beginning and .show() when I wanted to show it. They are working just fine and I really like the "slide" effect .show() function does. Only problem is these functions don't hold the space for the element which I need.

setTimeout(function(){
    $("#myelement").hide()
},0);

setTimeout(function(){
    $("#myelement").show(500)
},500);

After that I tried doing this with changing style.visibility = "hidden" and = "visible" when I want it to show. These are also working great, and they keep the free space for my element. Problem is they don't have any showing effect, they just pop up like its nothing which doesn't look that nice.

setTimeout(function(){
    document.getElementById('myelement').style.visibility = "visible";
},500);

So my question is, is there any way of combining these two or using better functions to keep the space for my hidden element but using some nice effect when showing?

I would still consider myself as a beginner and would really appreciate beginner-friendly answers.

Thank you!

[`fadeOut`](https://api.jquery.com/fadeOut/) and [`fadeIn`](https://api.jquery.com/fadeIn/)? — Joseph Sible-Reinstate Monica, Apr 23 '20 at 23:09
for effect u can use animated.css and if u want space u should use visibility — mr. pc_coder, Apr 23 '20 at 23:10
@JosephSible-ReinstateMonica, jQuery fadeOut() changes the display style property to none once visibility is 0. — Frank Fajardo, Apr 23 '20 at 23:16
fadeOut and fadeIN should work too, I will definitely try those, thank you. But I'm talking about the "slide from the side" effect .show() does. — simonugor, Apr 23 '20 at 23:19
@JoelHager I have to look up how to set animations via CSS, thank you for your suggestion. — simonugor, Apr 23 '20 at 23:19
It's called '@keyframes' if you just want a fade in, set class opacity 0 and use a transition. — Joel Hager, Apr 23 '20 at 23:21
Or this? [jQuery fadeOut without display none?](https://stackoverflow.com/q/4549389) — Joseph Sible-Reinstate Monica, Apr 23 '20 at 23:27

jQuery show/hide doesn't keep free space for elements

0 Answers0