I want to hide an element as soon as it bees 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);

I want to hide an element as soon as it bees 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);

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 12, 2016 at 21:50 Fueled By Coffee 2,56977 gold badges3232 silver badges4444 bronze badges asked Dec 12, 2016 at 20:47 sarahsarah 15711 gold badge33 silver badges1111 bronze badges 8

• So what is making it visible, why are you using a timeout? – epascarello Commented Dec 12, 2016 at 20:48
• where is your html? – Ruhul Amin Commented Dec 12, 2016 at 20:49
• Why not using a simple css rule for that? If you must use JS try to wrap your code in $(document).ready() – empiric Commented Dec 12, 2016 at 20:49
• I have some code given to me. it generates 2 of the same html elements with the same id. All i want to do is hide one of them. – sarah Commented Dec 12, 2016 at 20:50
• 1 So when are they generated? And the only way you will not get a flash of content is to hide it with CSS to start. Best solution, change whatever is making it twice.... – epascarello Commented Dec 12, 2016 at 20:54

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 6

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