Esconda um elemento depois de alguns segundos usando JavaScript
Ao projetar uma página da Web responsiva, pode haver um requisito para ocultar algumas funcionalidades adicionais após um certo tempo para criar efeitos. Por exemplo, alertar um usuário através da mensagem pop-up por um tempo limitado faz maravilhas para chamar a atenção do usuário, abstendo-se de se ofender. Em tais cenários, ocultar um elemento depois de alguns segundos usando JavaScript ajuda a fazer uma página da web ou o site se destacar.
Este tutorial explicará o conceito de ocultar um elemento depois de alguns segundos usando JavaScript.
Como esconder um elemento depois de alguns segundos em JavaScript?
As abordagens a seguir podem ser utilizadas para ocultar um elemento após alguns segundos usando JavaScript:
- ““setTimeout ()”Método com o“mostrar" propriedade.
- ““setTimeout ()”Método com o“visibilidade" propriedade.
- ““jQuery" métodos.
Vamos discutir as abordagens declaradas uma a uma!
Abordagem 1: ocultar um elemento após alguns segundos no JavaScript usando o método setTimeout () Ccom a propriedade de exibição
O "setTimeout ()”O método chama uma função após o tempo atribuído especificado. Considerando que a "mostrar”Propriedade define o tipo de exibição do elemento especificado. Essas abordagens podem ser implementadas para alocar um tempo definido para o elemento buscado, para que se esconda após o tempo especificado.
Sintaxe
Settimeout (Func, Milli, PAR1, PAR2)Na sintaxe acima mencionada:
- ““functão”Indica a função que precisa ser acessada.
- ““mili”Corresponde ao intervalo de tempo em milissegundos para executar.
- ““PAR1" e "PAR2”Aponte para os parâmetros adicionais.
Na sintaxe acima:
- A propriedade de exibição do “Objeto"É atribuído como"nenhum”.
Exemplo
O exemplo a seguir ilustra o conceito declarado:
Aplique as etapas abaixo, conforme fornecido no código acima:
- Em primeiro lugar, inclua um “”Elemento com o“src" e "eu ia”Como seus atributos.
- No código JS, aplique o “setTimeout ()”Método para as linhas de código declaradas. O tempo definido, neste caso, será 5000 milissegundos = “5Segundos.
- Dentro do método, acesse o elemento incluído por seu “eu ia”Usando o“getElementById ()”Método.
- Depois disso, atribua o “mostrar”Propriedade associada ao elemento buscado como“nenhum”.
- Isso resultará resultantes do “”Elemento após 5 segundos do Modelo de Objeto do Documento (DOM).
Saída
Como observado na saída acima, o incluído “”O elemento se esconde depois de“5Segundos.
Abordagem 2: ocultar um elemento após alguns segundos no JavaScript usando o método setTimeout () com a propriedade Visibility
O "visibilidade”Propriedade define a visibilidade de um elemento. Esta propriedade pode ser aplicada combinada com o “setTimeout ()”Método para ocultar o elemento buscado após o tempo definido.
Sintaxe
Objeto.estilo.visibilidade = 'oculto'Nesta sintaxe:
- A visibilidade do especificado “Objeto"É atribuído como"escondido”.
Exemplo
Vamos passar pelo exemplo abaixo do ponto:
| EU IA | Nome | Idade |
|---|---|---|
| 1 | David | 18 |
Execute as etapas a seguir, conforme fornecido nas linhas de código acima:
- Inclua o “
”Elemento com os atributos“fronteira" e "eu ia”.
- Além disso, contém os valores declarados na tabela dentro do “
"," ", e " " Tag. - No código JavaScript, da mesma forma, aplique o “setTimeout ()”Método com um tempo definido de“3Segundos.
- Depois disso, invocar o “getElementById ()”Método para buscar o elemento incluído, conforme discutido.
- Por fim, aplique o “visibilidade”Propriedade e alocá -la como“escondido”. Isso ocultará o elemento associado após 3 segundos.
Saída
Na saída acima, é evidente que o “mesa”O elemento se esconde após o tempo definido.
Abordagem 3: Esconda um elemento depois de alguns segundos em JavaScript usando métodos jQuery
O "jQuery”O método pode ser aplicado para ocultar o elemento correspondente buscando -o diretamente e desbotando após o tempo adicionado.
Exemplo
Vamos ver o exemplo a seguir:
Este é o site Linuxhint
No trecho de código acima:
- Inclua o “jQueryBiblioteca para utilizar seus métodos.
- Inclua o “”Elemento com o indicado“eu ia”.
- No código JS, acesse o elemento incluído diretamente usando seu ID.
- Depois disso, aplique o “mostrar()”Método, que exibirá o elemento buscado.
- O "atraso()" e a "desaparecer()”Os métodos serão aplicados em combinação para ocultar o elemento associado após o tempo de atraso definido (“5”Segundos).
Saída
A saída acima significa que o texto adicionado é oculto após cinco segundos.
Conclusão
O "setTimeout ()”Método com o“mostrar”Propriedade, a“setTimeout ()”Método com o“visibilidade”Propriedade, ou a“jQuery”Os métodos podem ser usados para ocultar um elemento depois de alguns segundos em JavaScript. O método setTimeout () combinado com a exibição ou propriedade de visibilidade pode ocultar o elemento buscado após o tempo definido. Enquanto os métodos jQuery podem buscar o elemento diretamente, exibi -lo e depois escondê -lo desbotando. Este artigo explicou como ocultar um elemento depois de alguns segundos usando JavaScript.
- Além disso, contém os valores declarados na tabela dentro do “