Veja neste artigo como criar uma caixa de mensagem semelhante ao chat do facebook utilizando jquery.

A caixa será dividida em duas partes, a inicial sempre será visivel na tela, e caixa que contém a mensagem, que vai aparecer quando o usuário passar o mouse sobre a caixa inicial. Você pode baixar o vídeo no topo do artigo, na opção "download" e veja a ideia de como deveria ficar.

Veja o código html:


<div class="panel">
    <p><b>Teste</b></p>
    <p>>teste1</p>
    <p>>teste2</p>
</div>

<p class="flip">Mensagens</p>

A classe flip para a caixa inicial e a classe panel para a caixa de mensagem.

Tendo o html vamos configurar o CSS dos componentes que iremos utilizar


div.panel,p.flip
{
    width: 70px;
    padding:5px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
    position:fixed;
    right:10px;
    bottom:-15px;
    z-index:1;
}
div.panel
{
    position:fixed;
    bottom: 29px;
    width: 200px;
    height: auto;
    display:none;
    text-align:left;
    z-index:1;
}

Os comandos "position:fixed" e "z-index:1" permitem que as caixas de mensagem fiquem em uma posição fixa desejada e em primeiro plano sempre.

abaixo o código do script jquery que permitira a animação do box.


$(".flip").mouseenter(function () {
    $(".flip").animate({ width: 200 }, "fast");
    $(".panel").delay(200).slideDown("fast");
});
$(".flip").mouseleave(function () {
    $(".panel").slideUp("fast");
    $(".flip").delay(200).animate({ width: 70 }, "fast");
});

Tudo ocorre nos eventos de entrada e saida do mouse, mostrando ou escondendo o box da mensagem e esticando ou encolhendo o box inicial, o delay é utilizado para manter armonia entre os efeiros de slide e animete, dando o efeito de que são continuos.

Veja como seria a imagem do box fechado e aberto.

Box Fechado
Figura 1. Box Fechado
Box Aberto
Figura 2. Box Aberto

Com isso finalizo este artigo, qualquer duvida é só postar aqui!

Abraço.

Aprenda mais sobre jQuery.