0

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!

9
  • fadeOut and fadeIn? Apr 23, 2020 at 23:09
  • 1
    for effect u can use animated.css and if u want space u should use visibility Apr 23, 2020 at 23:10
  • @JosephSible-ReinstateMonica, jQuery fadeOut() changes the display style property to none once visibility is 0. Apr 23, 2020 at 23:16
  • Just toggle class and set animations via CSS.
    – Joel Hager
    Apr 23, 2020 at 23:18
  • 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, 2020 at 23:19

0

Browse other questions tagged or ask your own question.