Como esperar 5 segundos com jQuery?

Estou tentando criar um efeito no qual a página carrega e, após 5 segundos, a mensagem de sucesso na tela desaparece ou desliza para cima.

Como posso conseguir isso?

Construído em javascript setTimeout .

setTimeout(
  function() 
  {
    //do something special
  }, 5000);

ATUALIZAÇÃO : você deseja esperar desde que a página termine de carregar, portanto, coloque esse código dentro do seu $(document).ready(...);script.

ATUALIZAÇÃO 2 : o jquery 1.4.0 introduziu o .delaymétodo. Confira . Observe que .delay funciona apenas com as filas de efeitos do jQuery.

Use um timer javascript normal:

$(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
});

Isso aguardará 5 segundos depois que o DOM estiver pronto. Se você quiser esperar até que a página seja realmente loadednecessária, use isso:

$(window).load(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
})

EDIT: Em resposta ao comentário do OP perguntando se existe uma maneira de fazê-lo no jQuery e não usar setTimeouta resposta é não. Mas se você quiser torná-lo mais "jQueryish", pode envolvê-lo assim:

$.wait = function( callback, seconds){
   return window.setTimeout( callback, seconds * 1000 );
}

Você poderia chamá-lo assim:

$.wait( function(){ $("#message").slideUp() }, 5);

Encontrei esta questão e pensei em fornecer uma atualização sobre este tópico. O jQuery (v1.5 +) inclui um Deferredmodelo que (apesar de não seguir as especificações Promises / A até o jQuery 3) é geralmente considerado como uma maneira mais clara de abordar muitos problemas assíncronos. A implementação de um $.wait()método usando essa abordagem é particularmente legível, acredito:

$.wait = function(ms) {
    var defer = $.Deferred();
    setTimeout(function() { defer.resolve(); }, ms);
    return defer;
};

E aqui está como você pode usá-lo:

$.wait(5000).then(disco);

No entanto, se, após a pausa, você desejar apenas executar ações em uma única seleção do jQuery, deverá usar o nativo do jQuery, .delay()que acredito também usar o deferido sob o capô:

$(".my-element").delay(5000).fadeIn();

setTimeout(function(){


},5000); 

Coloque seu código dentro do { }

300 = 0.3 seconds

700 = 0.7 seconds

1000 = 1 second

2000= 2 seconds

2200 = 2.2 seconds

3500 = 3.5 seconds

10000 = 10 seconds

etc.

Usamos este para uma sobreposição de mensagem que pode ser fechada imediatamente com um clique ou fecha automaticamente após 10 segundos.

button = $('.status-button a', whatever);
if(button.hasClass('close')) {
  button.delay(10000).queue(function() {
    $(this).click().dequeue();
  });
}

A biblioteca Underscore também fornece uma função "delay":

_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');

Com base na resposta de Joey, criei uma solução pretendida (por jQuery, leia sobre 'fila').

Ele segue um pouco a sintaxe jQuery.animate () - permite ser encadeado com outras funções fx, suporta 'slow' e outras jQuery.fx.speed, além de ser totalmente jQuery. E será tratado da mesma maneira que as animações, se você as parar.

O campo de teste do jsFiddle com mais usos (como exibir .stop ()), pode ser encontrado aqui .

o núcleo da solução é:

$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) => { $('#result').text('done.'); next(); } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

o conjunto como um plug-in, suportando o uso de $ .wait () e $ (..). wait ():

// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) {

  $.wait = function(duration, completeCallback, target) {
    $target = $(target || '<queue />');
    return $target.delay(duration).queue(function(next){completeCallback && completeCallback.call($target); next();});
  }

  $.fn.wait = function(duration, completeCallback) {
    return $.wait.call(this, duration, completeCallback, this);
  };

})(jQuery);

//TEST
$(function() {

  // stand alone
  $.wait(1000, function() {
    $('#result')
    .append('...done');
  });

  // chained
  $('#result')
  .append('go...')
  .wait('slow', function() {
    $(this).append('after slow');
  })
  .css({color: 'green'});
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Nota: como o wait é adicionado à pilha de animação, $ .css () é executado imediatamente - como se supõe: comportamento esperado do jQuery.

$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );

Perceba que essa é uma pergunta antiga, mas escrevi um plugin para resolver esse problema que alguém pode achar útil.

https://github.com/madbook/jquery.wait

permite fazer isso:

$('#myElement').addClass('load').wait(2000).addClass('done');