Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fred silva

caixa de curtir fixa na lateral

Por , em Javascript

Recommended Posts

fred silva    1

fred silva
Postado

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+

Compartilhar este post

Link para o post
Compartilhar em outros sites

fred silva    1

fred silva
Postado

Eu atá tentei assim:

$(document).ready(function(){
  $('#box_facebook').hide();
$('#box_lateral').mouseover(function(event){
    $(this).next().animate({width:'toggle'},800);
    $('#box_lateral').addClass('box_lateral_open');
});
$('#box_facebook').mouseout(function(event){
    $('#box_lateral').removeClass('box_lateral_open')					
    $('#box_facebook').hide();			
});		
  });

Mas não tá funcionando como eu quero, desta forma eu só consigo animar a box do facebook, a que eu passo o mouse por cima não.

Alguém tem alguma idéia?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito