Séries de Web: Aplicando efeito em Menu com JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $w	= 0; 	
var $h	= 0;
$(".circulares").animate({
top: $h,
left: $w, 
opacity: .2}, {
   duration: 800,
   complete: function(){
     $(".menu").hide();
     $(this).animate({opacity: 1},{
	complete: function(){
           $(".menu").show("slow");
    	}
     });
   }
}).show();
$(".menu").mouseover(function(){
  $(this).parent().animate({opacity: .9}).css({'background-color':'#FF9900'});
}).mouseout(function(){
  $(this).parent().animate({opacity: 1}).css({'background-color':'#CCC'})
});
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> $(document).ready(function(){ var $w = 0; var $h = 0; $(".circulares").animate({ top: $h, left: $w, opacity: .2}, { duration: 800, complete: function(){ $(".menu").hide(); $(this).animate({opacity: 1},{ complete: function(){ $(".menu").show("slow"); } }); } }).show(); $(".menu").mouseover(function(){ $(this).parent().animate({opacity: .9}).css({'background-color':'#FF9900'}); }).mouseout(function(){ $(this).parent().animate({opacity: 1}).css({'background-color':'#CCC'}) }); }); </script>

<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
}
a{ text-decoration:none }
#content{ 
width:850px; /* 850+55+55 = 960 */ 
height:170px; 
margin:0 auto;
padding: 0 55px;
background:#666666;
}
.circulares{ 
background-color:#CCCCCC;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
width:150px;
height:150px;
line-height:150px;
float:left; /* posicionamento */
margin:10px; /* espaçamento entre os circulos */
text-align:center;
position:relative;
top: -170px; /* altura do #content */
left: -960px; /* largura do #content */
z-index:999;
display:none;
}
.circulares a{ color:#000 }
.circulares a:hover{ color:#FFF; }
</style>

<style type="text/css"> body{ font-family:Arial, Helvetica, sans-serif; } a{ text-decoration:none } #content{ width:850px; /* 850+55+55 = 960 */ height:170px; margin:0 auto; padding: 0 55px; background:#666666; } .circulares{ background-color:#CCCCCC; -webkit-border-radius: 150px; -moz-border-radius: 150px; border-radius: 150px; width:150px; height:150px; line-height:150px; float:left; /* posicionamento */ margin:10px; /* espaçamento entre os circulos */ text-align:center; position:relative; top: -170px; /* altura do #content */ left: -960px; /* largura do #content */ z-index:999; display:none; } .circulares a{ color:#000 } .circulares a:hover{ color:#FFF; } </style>

<div id="content">
  <div class="circulares"><a href="#" class="menu">HOME</a></div>
  <div class="circulares"><a href="#" class="menu">EMPRESA</a></div>
  <div class="circulares"><a href="#" class="menu">FOTOS</a></div>
  <div class="circulares"><a href="#" class="menu">SERVIÇOS</a></div>
  <div class="circulares"><a href="#" class="menu">CONTATO</a></div>
</div>

<div id="content"> <div class="circulares"><a href="#" class="menu">HOME</a></div> <div class="circulares"><a href="#" class="menu">EMPRESA</a></div> <div class="circulares"><a href="#" class="menu">FOTOS</a></div> <div class="circulares"><a href="#" class="menu">SERVIÇOS</a></div> <div class="circulares"><a href="#" class="menu">CONTATO</a></div> </div>