Ícones de contato - jQuery

Mostrar e esconder conteúdo na horisontal

by Jairo Fontes

HTML

<div class="geral">
    <img class="icone" src="http://distribuidoraber.com/imagens/telefoneIconeAzul.png" />
    <div class="conteudo">(27) 3262-3451</div>
</div>

<div class="geral">    
    <img class="icone" src="http://distribuidoraber.com/imagens/skypeIconeAzul.png" />
    <div class="conteudo">(27) 3262-3451</div>
</div>
    
<div class="geral">
    <img class="icone" src="http://distribuidoraber.com/imagens/emailIconeAzul.png" />
    <div class="conteudo">[email protected]</div>
</div>

CSS

img{
    float:left;
    cursor:pointer;
    
}
.conteudo{
    background:#0090FF;
    font-size:20px;
    color:#FFF;
    height:21px;
    display:none;
    border:12px solid #0090FF;
    float:left;
    line-height:20px;

}

JavaScript

$(".geral").hover(function(){
    $(this).children(".conteudo").animate({
        width:'toggle'
    },'fast').stop();
});