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/