Preciso criar um label
de aviso como este:
<p id="lblAviso">Salvo com sucesso</p>
E removê-lo depois de 3 segundos.
Como fazer isso com jquery? Precisa de algum plugin
?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePreciso criar um label
de aviso como este:
<p id="lblAviso">Salvo com sucesso</p>
E removê-lo depois de 3 segundos.
Como fazer isso com jquery? Precisa de algum plugin
?
Pode usar assim:
var aviso = '<p id="lblAviso">Salvo com sucesso</p>';
var destino = $('#destinoAviso');
//codigo que você quer:
destino.append(aviso);
setTimeout(function(){
$('#lblAviso').remove();
},3000);
Outro exemplo usando fade in/out, escondendo o elemento directamente no CSS.
Neste exemplo uso:
Você pode também usar uma cadeia jQuery, usando o .delay() e chamando a função callback do .fadeOut() para remover o elemento quando a animação chegar ao fim.
Assim, e fazendo nota ao CSS #lblAviso {
display:none;
}
, o código pode ser:
$('#lblAviso').fadeIn().delay(3000).fadeOut(function () {
$(this).remove()
});
Outro exemplo, usando uma overlay (sobrecamada).
.show
e .hide
(ou .toggle(true|false)
).
20/12/2013 às 16:47
Uma forma interessante é exibir o aviso e remover com um fade out:
$('<p id="lblAviso">Salvo com sucesso</p>')
.appendTo('body')
.delay(1000)
.fadeTo("slow", 0, function() { $(this).remove(); });
Note que, ao final, o elemento é removido.
Veja o exemplo funcional no jsfiddle.
Você pode, ao invés removê-lo imediatamente da página, escondê-lo de forma animada controlando o tempo de animação:
$lblAviso = $('<p id="lblAviso">Salvo com sucesso</p>'); // cria o elemento
$lblAviso.hide(); // atribui o elemento como escondido (apesar de ainda não estar na página)
$('#conteudo').append($lblAviso); // adiciona o elemento a outro elemento
$lblAviso.fadeIn(); // exibe o elemento com animação de fade (animação rápida)
$lblAviso.fadeOut(3000); // esconde o elmento com animação de fade (a animação dura 3 segundos)
Se achar necessário remover o elemento da página troque a última linha do exemplo por:
$lblAviso.fadeOut(3000, function() { $lblAviso.remove(); });
Já existem inúmeras respostas muito boas para lidar com a questão colocada, vou apenas deixar um exemplo diferente e abstracto do elemento alvo, que pode servir para futuros visitantes.
Criar uma "mini" extensão de jQuery que permite adicionar legendas de aviso, sucesso, informação ou erro a qualquer elemento na página, permitindo assim reutilizar o mesmo excerto de código em várias situações.
Ver exemplo no JSFiddle, com alguma formatação de CSS para demonstração!
;(function ($) {
$.fn.goLabel = function( options ) {
var opts = $.extend({
type: "success",
message: "guardado com sucesso",
time: 3000
}, options );
var $label = $('<span/>', {"class": "label"}).addClass(opts.type).html(opts.message);
return this.append($label).find('.label').delay(opts.time).fadeOut(300, function(){
$(this).remove();
});
};
}( jQuery ));
A utilização é simples, através de um id
ou class
, chamamos o goLabel()
com as opções pretendidas:
// assumindo as opções por defeito
$( "#devicePrice" ).goLabel();
// com personalização das opções
$( "#newsletterStatus" ).goLabel({
type: "info",
message: "receber é muito bom",
time: 3000
});