Tips JQuery: Mostrar y Ocultar un mensaje automáticamente

Hola a tod@s

 

La idea de este truco es mostrarle lo sencillo que es hacer aparecer un mensaje y que se oculte de manera automática después de cierto tiempo.

Código HTML:

<button id="btn">Esperar 1 Segundos</button>
<div id="message" >Test</div>

 

Código JavaScript:

$( "#btn" ).click(function() {
    setTimeout(showTooltip, 1000)
});

function showTooltip()
  {
       $("#message").show("slow");
       setTimeout(hideTooltip, 3000)
  }

function hideTooltip()
  {
   $("#message").hide("slow");
  }

 

Código CSS:

#message
    {
        background-color:blue;
        display: none;
        margin: 3px;
        width: 80px;
        float: left;
        text-align: center;
    }

 

Link del Resultado: http://jsfiddle.net/ajimenezg/Rhnxt/6/embedded/result/