Change class after 3s via javascript

Question

Change class after 3s via javascript

Asked 7 years, 1 month ago

Viewed 556 times

0

I need to change the class of some elements after 3 seconds starting to load the site, I want to do this but I can’t, I was trying with SetTimeoutbut I can’t manipulate the question of seconds and I couldn’t find a solution via Google. I want the site loads with the div in class .oculto and after 3 seconds she goes to class .visivel Does anyone know of any solution, please?

Follow Example: HTML

<div class="oculto"></div>

CSS

.oculto{opacity:"0"}
.visivel{opacity:"1";width:100%;height:10%;background-color:#cccccc;}

3 answers

4

The syntax for this would be like this:

setTimeout(function(){
    document.querySelector('.oculto').classList.add('visivel');
}, 3 * 1000);

As Javascript works in milliseconds you have to pass 3000 ms to setTimeout. Notice that I wrote setTimeout with the first small "s".

If you have several elements you can do so:

var ocultos = document.querySelectorAll('.oculto');
for (var i = 0; i < ocultos.length; i++){
    ocultos[i].classList.add('visivel');
}

It worked but in only 1 element, I applied in 1 div and 2 img and only in the div this working, the other item the class is still hidden.

– Clayton Furlanetto

2017/10/10 at 14:32
It didn’t work on several elements, only on one, the solution was to create more classes like occult 1 Occult 2 Occult 3 and create tbm 3 setTimeout changing to the visible class, I don’t know if it would be the right one, but it worked. Thank you @

– Clayton Furlanetto

2017/10/10 at 14:41
@Claytonfurlanetto uses the same class for everyone. I added this variant to the answer.

– Sergio

2017/10/10 at 14:44
didn’t work out this doing the opposite in 3s this disappearing all item with class .oculto I did it that way, it’s right? setTimeout(function(){
 var ocultos = document.querySelectorAll('.oculto');
for (var i = 0; i < ocultos.length; i++){
 ocultos[i].classList.add('.visivel');
};
},4 * 1000);

– Clayton Furlanetto

2017/10/10 at 17:02
@Exact Claytonfurlanetto. The code I put in was to put inside the setTimeout as you did.

– Sergio

2017/10/10 at 17:07
It didn’t really work out, but otherwise it worked, so I’ll leave it at that msm. vlw.

– Clayton Furlanetto

2017/10/10 at 17:27

Show 1 more comment

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.

by gabrielfalieri • **1,231** points · Answer 1 · 2017-10-10T14:15:07+00:00

1

has the function called Sleep(), where you pass the time parameter, in milliseconds

1

What is this function sleep()?

– Sergio

2017/10/10 at 14:16
It’s a waiting function

– gabrielfalieri

2017/10/10 at 14:19
This is php function, it is not?

– Silvio Andorinha

2017/10/10 at 14:22
I think the answer in the current format would fit more as a comment, it would be interesting to put example of use

– Silvio Andorinha

2017/10/10 at 14:23
@gabrielfalieri From what I researched it seems interesting this function, but I could not apply in my case, I’m starting in js yet, I will test the other answers, but thank you, this function is very interesting I will delve more into it.

– Clayton Furlanetto

2017/10/10 at 14:24
I think the setTimeOut would be easier for you to apply, starting

– gabrielfalieri

2017/10/10 at 14:28
Tbm I think, I’m testing the @Rgio response I believe will work, thank you.

– Clayton Furlanetto

2017/10/10 at 14:34

Show 2 more comments

by Silvio Andorinha • **8,394** points · Answer 2 · 2017-10-10T14:17:21+00:00

Very simple:

setTimeout(function(){ 

(document.getElementsByTagName('div')[0]).classList.remove("oculto");
(document.getElementsByTagName('div')[0]).classList.add("visivel");


 },3000)

As the setTimeout count is in milliseconds 3,000 to 3 seconds are required