Como você faz uma pausa antes de esmaecer um elemento usando jQuery?
-
09-06-2019 - |
Pergunta
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?
Solução
O novo delay()
função no jQuery 1.4 deve resolver o problema.
$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();
Outras dicas
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.
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
});
Para uma abordagem jQuery pura, você pode fazer
$("#element").animate({opacity: 1.0}, 5000).fadeOut();
É um hack, mas funciona
var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
setTimeout(function(){
$msg.fadeOut(function(){
$msg.remove();
});
},5000);
});
Seguindo o comentário de dansays, o seguinte parece funcionar perfeitamente bem:
$('#thing') .animate({dummy:1}, 2000)
.animate({ etc ... });
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);
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).