JQuery Dúvidas, erros e código que não funciona.

Tiago.tet · 28 de outubro de 2011

Galera boa noite, estou começando a mexer no Jquery, e quase desistindo também.

Hoje comecei a montar um site simples, que mais tarde será meu Portfólio.

Enfim, montei os seguintes códigos:

HTML

<!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" />
<title>- T.souza - </title>
<link rel="stylesheet" href="estilo\estilo.css" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(funtion(){
	$('.efeito_fade').append('<span class="hover"></span>').each(funtion(){
		var $span = $('> span.hover', this).css('opacity',0);
		$(this).hover(funtion (){
			$span.stop().fadeTo(500, 1);
			}, function (){
				$span.stop().fadeTo(500, 0);
			});
		});
	{);
</script>				
</head>
<body>
<div id="container">
	<div id="topo">
		Aqui terá o banner do site
    </div>
       <div id="menu">
    	<a href="#" id="botao_home" class="efeito_fade"></a>
        </div>
        	<div id="conteudo">
               Conteúdo do site
            </div>
            	<div id="rodape">
                 Rodape do site
                </div>

</div>    
</body>
</html>

CSS

body{
	margin: 0;
	padding: 0;
	background: #000000;
	}
#container{
	margin: auto;
	width: 1200px;
	background: #00FF99;
	}
#topo{
	margin: auto;
	margin-top: 20px;
	width: 1200px;
	height: 200px;
	background-image:url(../imagens/topo.jpg);	
	}
#menu{
	margin: auto;
	width: 1200px;
	height: 40px;
	background:#000000;
	}
#conteudo{
	margin: auto;
	width:  1200px;
	height: 500px;
	background:#FFFFFF;
	}
#rodape{
	margin: auto;
	width: 1200px;
	height: 20px;
	background:#666666;
	}

/* botao home*/

#botao_home{
	clear: both;
	position: relative;
	display: block;
	height: 64px;
	width: 570px;
	background: url("../botaoMenu/botao_home1.png") no-repeat;	
	background-position: 0 0;
	cursor: pointer;
	}
#botao_home span.hover{
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url("../botaoMenu/botao_home2.png") no-repeat;
	background-position: bottom;
	}