How can I make an element disappear?

Question

I want to hide an element as soon as it becomes visible (has loaded).

I have tried using timeout and setInterval . They work fine but they are a few seconds late. So first the element loads and then it disappears. But I want it so it doesn't appear at all and just disappears without appearing first.

I tried to change the time and make it more/less but it didn't help. Is there another way?

I even tried to put the timeout and setinterval inside window.load it didn't work. I also tried checking when the element is visible by using the length but it was slow too.

        window.setInterval(function(){ 
            jQuery("#vz").find('div').first().hide();

        }, 600);

Answer 1

You can specify its visibility as hidden (In case you still want it to occupy space)

Or specify its display as none (In case you don't want it to occupy space)

Both of these should be done using CSS, so in your CSS file:

#vz {
    //This:
    visibility: hidden;
    //Or this:
    display: none;
}

And as a general role of thumb, initial style should be set in CSS and then you can animate/change it using JS or more CSS