Estou tentando enviar uma mensagem ao usuário utilizando jQuery e esconde-la de forma automática após alguns segundos. Esse procedimento ocorre perfeitamente a menos que o evento ocorra em tempo inferior ao tempo de ocultar a mensagem, fazendo com que a mensagem não chegue sincronizada com o evento. Para realizar um teste clique multiplas vezes no link para acompanhar o resultado.
Segue o exemplo:
$('#id').click(function(){
$("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().fadeIn();
$("#msg").delay(5000).fadeOut();
});
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/css/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" id="id" class="btn">alerta</a>
<div id="msg"></div>
OBS: Qualquer outra solução para resolver esse problema é bem vinda.
.stop()
assim:$("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().stop().fadeIn();
– Sergio♦ 9/02/15 às 1:25