Difference between JQuery .show/.hide and CSS visibility:hidden

Question

I am trying to show and hide Div element with JQuery:

$("#Progress").hide("fast");

However I need the set the div #Progress element as hidden to start with.

     <div style="height:30px;margin-top:5px">
        <div id="Progress" style="visibility:hidden">
            <div style="float:left"> <img src="../../../../Content/images/ProgressSpinner.gif"/></div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Saving.......</div>
        </div>
    </div>

It seems that if I use JQuery to hide it every time I load, I get a flashing effect as it keeps hiding it onload. So I really want it to be hidden until I show in JQuery.

I did try using the CSS "Visibility" attribute, but my JQuery .Show("fast") command has no effect on it, so remains hidden.

So what is the best way to default a div to hidden such that a JQuery .Show command can show the Div when relevant ie when a link is clicked.

    $(document).on("click", ".edit-link", function (e) {

`display:none;`. Try reading the docs, it answers your question http://api.jquery.com/hide/ — j08691, Oct 23 '13 at 19:41
`visibility: hidden` still takes up space. `show/hide` set `display: none` which doesnt take up sace. — crush, Oct 23 '13 at 19:41
possible duplicate of [What is the difference between visibility:hidden and display:none?](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) — nietonfir, Oct 23 '13 at 19:42

score 3 · Answer 1 · answered Oct 23 '13 at 19:41

3

You need to set the display property on your element:

#Progress {
    display: none;
}

answered Oct 23 '13 at 19:41

nietonfir

4,797
6
31
43

score 1 · Accepted Answer · answered Oct 23 '13 at 19:49

a. If you don't want to see the flashing effect, don't use the .hide('fast').

But for your case, you could just do $("#Progress").hide();

On a side note, try .hide('slow') to see a slower hide.

b. .show("fast") has no effect because you have style="visibility:hidden" [which hides but takes up space on your page] on your progress div.

Remove that & replace with style="display:none" [hides & doesn't take up space on your page]

Difference between JQuery .show/.hide and CSS visibility:hidden

2 Answers2