caixa de curtir fixa na lateral
Olá galera,
estou desenvolvendo uma caixa de curtir do Facebook em jQuery. praticamente igual a esta: http://demobcf.blogspot.com/.
Eu quero que ela funcione assim: quando o usuário passa o mouse em cima dela ela aparece saindo da esquerda para a direita de forma animada.
Como tenho pouco conhecimento em jQuery não sei como fazer esta animação.
Segue os códigos:
CSS
*{border:0; margin:0; padding:0;}
#box_lateral{
margin:0;
padding:0;
position:fixed;
top:50%;
width:30px;
height:auto;
}
.box_lateral_open{
position:fixed;
top:50%;
left:305px;
}
#box_facebook{
margin:3px;
padding:0;
position:fixed;
top:35%;
border:1px solid #CCC;
overflow:hidden;
width:300px;
height:330px;
}Html com jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="estilo.css" />
<title>Menu Flutuante com jQuery</title>
<script src="jquery-1.6.1.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#box_facebook').hide();
$('#box_lateral').mouseover(function(event){
$('#box_lateral').addClass('box_lateral_open')
$('#box_facebook').show();
});
$('#box_facebook').mouseout(function(event){
$('#box_lateral').removeClass('box_lateral_open')
$('#box_facebook').hide();
});
});
</script>
</head>
<body>
<div id="box_lateral">
<a href="#"><img src="facebook.jpg" width="50"/></a>
</div>
<div id="box_facebook">
<!-- Caixa de curtir Facebook -->
</div>
</body>
</html>Agradeço a ajuda!
T+
Discussão (1)
Carregando comentários...