jQuery show por 5 segundos e depois ocultar

145

Estou usando .showpara exibir uma mensagem oculta após o envio bem-sucedido do formulário.

Como exibir a mensagem por 5 segundos e depois ocultar?

jquery hide message show timed josoroma
fonte

Respostas:

351

Você pode usar .delay()antes de uma animação, assim:

$("#myElem").show().delay(5000).fadeOut();

Se não for uma animação, use setTimeout()diretamente, assim:

$("#myElem").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

Você faz o segundo porque .hide()normalmente não estaria na fxfila de animação ( ) sem duração, é apenas um efeito instantâneo.

Ou, outra opção é usar .delay()e .queue()mesmo, como este:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});
Nick Craver
fonte
1
A sugestão 2 funcionou perfeitamente mostrando um ícone de marca de seleção e usando fadeOut () em vez de hide (). Ótima resposta.
Kevin Zych
2
@wilsjd Não, você não pode, .delay()não funcionará com .hide()o elemento será mostrado e imediatamente oculto. Veja este jsFiddle é por isso que Nick afirmou: "Se não é uma animação, uso setTimeout () diretamente, como este: ...."
Wesley Smith
Hmm, eu me pergunto se isso costumava funcionar há dois anos. Bom encontrar embora. Obrigado por me manter honesto.
wilsjd
Eu também implementaram isso, mas quando eu mostrar msg duas vezes dentro de 5 segundos, então ele deve esconder prev e re-show, enquanto ele faz atraso não reset do primeiro
alamnaryab
18

Você pode usar o efeito abaixo para animar, você pode alterar os valores conforme seus requisitos

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow');
Rahul
fonte
1
... $ (...) fadeIn (...) animado (...) efeito não é uma função em JQuery 2.1.3
Dustin Charles
@DustinCharles Adicione jQueryUI não apenas jQuery. jQuery não conter a função efeito (), por exemplo code.jquery.com/ui/1.12.0/jquery-ui.min.js
Rahul
0

Tão simples quanto isto:

$("#myElem").show("slow").delay(5000).hide("slow");
Antonio Ooi
fonte