0

Preciso alterar a classe de alguns elementos após 3 segundos que começar a carregar o site, quero fazer isso mas não consigo, estava tentando com SetTimeoutmas não consigo manipular a questão dos segundos e não encontrei solução via Google. Quero que o site carrega com a div na classe .oculto e depois de 3 segundos ela passe para a classe .visivel Alguém sabe de alguma solução, por favor?

Segue Exemplo: HTML

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

CSS

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

3 Respostas 3

4

A sintaxe para tal seria assim:

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

Como o JavaScript trabalha em milisegundos tens de passar 3000 ms ao setTimeout. Repara que escrevi setTimeout com o primeiro "s" pequeno.

Se tiveres vários elementos podes fazer assim:

var ocultos = document.querySelectorAll('.oculto');
for (var i = 0; i < ocultos.length; i++){
    ocultos[i].classList.add('visivel');
}
6
  • Funcionou mas em apenas 1 elemento, apliquei em 1 div e 2 img e só na div esta funcionando, os outros item a classe ainda continua oculto. Commented 10/10/2017 às 14:32
  • Não funcionou em vários elementos, somente em um, a solução foi criar mais classes como oculto1 oculto2 oculto3 e criar tbm 3 setTimeout mudando para a classe visível, não sei se seria o correto, mas funcionou. Obrigado @sergio Commented 10/10/2017 às 14:41
  • @ClaytonFurlanetto usa a mesma classe para todos. Adicionei essa variante à resposta.
    – Sergio
    Commented 10/10/2017 às 14:44
  • não deu certo esta fazendo o contrario em 3s esta sumindo todos os item com a classe .oculto Fiz dessa forma, esta correto? setTimeout(function(){ var ocultos = document.querySelectorAll('.oculto'); for (var i = 0; i < ocultos.length; i++){ ocultos[i].classList.add('.visivel'); }; },4 * 1000); Commented 10/10/2017 às 17:02
  • @ClaytonFurlanetto Exato. O código que coloquei era para colocar dentro do setTimeout como fizeste.
    – Sergio
    Commented 10/10/2017 às 17:07
1

tem a função chamada sleep(), onde você passa por parâmetro o tempo, em milissegundos

7
  • 1
    Qual é essa função sleep()?
    – Sergio
    Commented 10/10/2017 às 14:16
  • É uma função de espera Commented 10/10/2017 às 14:19
  • Essa função é do php, não é? Commented 10/10/2017 às 14:22
  • Acho que a resposta no formato atual se adequaria mais como um comentário, seria interessante colocar exemplo de uso Commented 10/10/2017 às 14:23
  • @gabrielfalieri Pelo que pesquisei parece interessante essa função, mas não consegui aplicar no meu caso, estou iniciando em js ainda, vou testar as outras respostas, mas obrigado, essa função é muito interessante vou me aprofundar mais nela. Commented 10/10/2017 às 14:24
0

Bem simples:

setTimeout(function(){ 

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


 },3000)

Como a contagem do setTimeout é em milissegundos são necessários 3.000 para 3 segundos

2
  • Nesse caso só funcionaria com div´s correto? Se fosse uma img, já não funcionaria. Commented 10/10/2017 às 14:32
  • Bom, aí eu usei um seletor básico, poderia pegar pelo id, classe, nome da tag, seria indiferente o importante é o elemento selecionado Commented 10/10/2017 às 14:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .