Esconder div após alguns segundos

Question

Eu estava pensando, como em jQuery eu sou capaz de esconder um div após alguns segundos? Como mensagens do Gmail, por exemplo.

Eu tentei meu melhor, mas sou incapaz de fazê-lo funcionar.

Answer 1

Isto irá esconder 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ê quiser apenas para se esconder, sem esmorecer, o uso hide().

Answer 2

Você pode tentar a .delay()

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

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

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

Answer 3

Há uma maneira muito simples de fazer isso.

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

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

Ao dar-lhe um curto período bom, parece ser instantânea, assim como a função .hide regular.

Answer 4

ofertas jquery uma variedade de métodos para esconder a div de forma programada, que não exigem a criação e compensação mais tarde ou redefinir temporizadores de intervalo ou outros manipuladores de eventos. Aqui estão alguns exemplos.

hide Pure, um segundo de atraso

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

hide Pure, nenhum atraso

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

hide Animado

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

fade out

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

Além disso, os métodos podem ter um nome ou função de filas como um segundo parâmetro (dependendo do método). Documentação para todas as chamadas acima e outras chamadas relacionadas podem ser encontradas aqui: https://api.jquery.com/category/effects/

Answer 5

$.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);
}

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

(permite o encadeamento de métodos)

Answer 6

Usando o temporizador jQuery também irá permitir que você tenha um nome associado com os temporizadores que estão ligados ao objeto. Então você pode anexar vários temporizadores para 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, Função, setTimeout e setInterval) fornecer acesso para o compilador JavaScript. Isso às vezes é necessário, mas na maioria dos casos, indica a presença de extremamente ruim codificação. A função eval é a característica mais mal do JavaScript.

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

Answer 7

Provavelmente a maneira mais fácil é usar os temporizadores plugin. http://plugins.jquery.com/project/timers e alguma coisa, então chamada como

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

Answer 8

podemos usar diretamente

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