Ocultar div após alguns segundos

Fiquei me perguntando, como em jquery eu sou capaz de esconder um div depois de alguns segundos? Como as mensagens do Gmail, por exemplo.

Eu tentei o meu melhor, mas não consigo fazê-lo funcionar.

Isso ocultará a div após 1 segundo (1000 milissegundos).

setTimeout(function() {
    $('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds

#mydiv{
    width: 100px;
    height: 100px;
    background: #000;
    color: #fff;
    text-align: center;
}

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

Se você quer apenas se esconder sem desbotar, use hide().

Você pode tentar o .delay()

$(".formSentMsg").delay(3200).fadeOut(300);

chame a div para definir o tempo de atraso em milissegundos e defina a propriedade que você deseja alterar. Nesse caso, usei .fadeOut () para que pudesse ser animado, mas você também pode usar .hide ().

http://api.jquery.com/delay/

O jquery oferece uma variedade de métodos para ocultar a div de maneira cronometrada que não requer configuração e, posteriormente, limpe ou redefina os cronômetros de intervalo ou outros manipuladores de eventos. Aqui estão alguns exemplos.

Pele pura, atraso de um segundo

// hide in one second
$('#mydiv').delay(1000).hide(0); 

Pele pura, sem demora

// hide immediately
$('#mydiv').delay(0).hide(0); 

Ocultar animado

// start hide in one second, take 1/2 second for animated hide effect
$('#mydiv').delay(1000).hide(500); 

desaparecer

// start fade out in one second, take 300ms to fade
$('#mydiv').delay(1000).fadeOut(300); 

Além disso, os métodos podem usar um nome de fila ou funcionar como um segundo parâmetro (dependendo do método). A documentação para todas as chamadas acima e outras chamadas relacionadas pode ser encontrada aqui: https://api.jquery.com/category/effects/

Existe uma maneira realmente simples de fazer isso.

O problema é que .delay afeta apenas animações, então o que você precisa fazer é fazer com que .hide () aja como uma animação, dando-lhe uma duração.

$("#whatever").delay().hide(1);

Ao oferecer uma curta e agradável duração, parece instantâneo, como a função .hide comum.

$.fn.delay = function(time, callback){
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.animate({delay:1}, time, callback);
}

De http://james.padolsey.com/javascript/jquery-delay-plugin/

(Permite encadeamento de métodos)

O uso do cronômetro jQuery também permitirá que você tenha um nome associado aos cronômetros anexados ao objeto. Assim, você pode anexar vários cronômetros a um objeto e parar qualquer um deles.

$("#myid").oneTime(1000, "mytimer1" function() {
  $("#something").hide();
}).oneTime(2000, "mytimer2" function() {
  $("#somethingelse").show();  
});

$("#myid").stopTime("mytimer2");

A função eval (e seus parentes, Function, setTimeout e setInterval) fornecem acesso ao compilador JavaScript. Às vezes, isso é necessário, mas na maioria dos casos indica a presença de códigos extremamente ruins. A função eval é o recurso mais mal utilizado do JavaScript.

http://www.jslint.com/lint.html

Provavelmente, a maneira mais fácil é usar o plug-in timers. http://plugins.jquery.com/project/timers e chame algo como

$(this).oneTime(1000, function() {
    $("#something").hide();
  });

podemos usar diretamente

$('#selector').delay(5000).fadeOut('slow');

<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>