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?

— josoroma
fonte

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