Como você faz uma pausa antes de esmaecer um elemento usando jQuery?

Question

Gostaria de exibir uma mensagem de sucesso em minha página.

Estou usando o jQuery fadeOut método para desaparecer e, em seguida, remover o elemento.Posso aumentar a duração para que dure mais, mas isso parece estranho.

O que eu gostaria que acontecesse é que o elemento fosse exibido por cinco segundos, depois desaparecesse rapidamente e, finalmente, fosse removido.

Como você pode animar isso usando jQuery?

Answer 1

O novo delay() função no jQuery 1.4 deve resolver o problema.

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

Answer 2

usar setTimeout(function(){$elem.hide();}, 5000);

Onde $elem é o elemento que você deseja ocultar e 5000 é o atraso em milissegundos.Na verdade, você pode usar qualquer função dentro da chamada para setTimeout(), esse código apenas define uma pequena função anônima para simplificar.

Answer 3

Embora a abordagem de @John Sheehan funcione, você se depara com o falha no jQuery fadeIn/fadeOut ClearType no IE7.Pessoalmente, eu optaria pelo @John Millikin's setTimeout() abordagem, mas se você estiver definido em uma abordagem jQuery pura, é melhor acionar uma animação em uma propriedade de não opacidade, como uma margem.

var left = parseInt($('#element').css('marginLeft'));
$('#element')
    .animate({ marginLeft: left ? left : 0 }, 5000)
    .fadeOut('fast');

Você pode ser um pouco mais limpo se souber que sua margem é um valor fixo:

$('#element')
    .animate({ marginLeft: 0 }, 5000)
    .fadeOut('fast');

EDITAR:Parece que o Plug-in jQuery FxQueues faz exatamente o que você precisa:

$('#element').fadeOut({
    speed: 'fast',
    preDelay: 5000
});

Answer 4

Para uma abordagem jQuery pura, você pode fazer

$("#element").animate({opacity: 1.0}, 5000).fadeOut();

É um hack, mas funciona

Answer 5

var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
  setTimeout(function(){
    $msg.fadeOut(function(){
      $msg.remove();
    });
  },5000);
});

Answer 6

Seguindo o comentário de dansays, o seguinte parece funcionar perfeitamente bem:

$('#thing') .animate({dummy:1}, 2000) .animate({ etc ... });

Answer 7

Atualização para 1.6.2

A resposta de Nathan Long fará com que o elemento apareça sem obedecer a atraso ou fadeOut.

Isso funciona:

$('#foo').delay(2000).fadeOut(2000);

Answer 8

a resposta de dansays simplesmente não funciona para mim.Por algum motivo, remove() é executado imediatamente e o div desaparece antes que qualquer animação aconteça.

Os seguintes trabalhos, no entanto (omitindo o remove() método):

$('#foo').fadeIn(500).delay(5000).fadeOut(500);

Não me importo se houver DIVs ocultos na página (de qualquer maneira, não deve haver mais do que alguns).