Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Creare animazioni con jQuery e CSS

Maggio 2nd, 2009 by Giovanni Caputo

demo.
Flashy intro with jQuery animation

Header:

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" language="Javascript" src="js/jquery.color.js"></script>

Html della pagina

<body>
<div id="container">
<ul id="navigator" class="fancy" >
<li><a class="c1" href="#">Design-Notes</a></li>
<li><a class="c2" href="#">Likes to be</a></li>
<li><a class="c3" href="#">Creative</a></li>
</ul>
</div>
</body>

CSS

body{
background:#000;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
}
a{
color:#fff;
text-decoration:none;
font-weight:bold;
}
#container{
width:600px;
margin: 100px auto;
}
#navigator li{
display:inline;
}
#navigator li a{
position:relative;
padding:2px 5px;}

Javascript

Leggere ciò che riguarda:  chained animation and unqueued animation animation.

var menu_over_colors = ["#ffffff","#55C7FF","#FF5A8D","#FFA324","#f453g5"];/* the colors you want to use*/
$(document).ready(function(){
$("#navigator &gt; li &gt; a").each(function(){
var over_color = menu_over_colors[$(this).attr('class').substring(1,3)];
   $("#navigator li a").animate({ color: over_color }, 200);/* animate text color for all text*/
  $("#navigator li+li+li a").animate({fontSize: '3em'}, 300);/* animate text of the third list*/
 $("#navigator li+li a").animate({top: '50px'}, 300);/* animate text of the second list*/
  $("#navigator li a").animate({left: '50px',}, 300)
  .animate({fontSize: '1.5em'}, 300)
  .animate({ backgroundColor:over_color }, 500,
function() {var over_color  = menu_over_colors[$(this).attr('class').substring(1,3)];/* point out the colors again*/
$(this).animate({color:'white',backgroundColor:over_color},300);});
});/* animate all text again with callback function*/
	$("#navigator &gt; li &gt; a").hover(
		function(){//over
			var over_color  = menu_over_colors[$(this).attr('class').substring(1,3)];
			$(this).animate({ color: over_color }, 500 );
			$(this).animate({ backgroundColor:over_color }, 500 );
		},
		function(){//out
			$(this).animate({color: menu_over_colors[0]},500);
		});
});





Questo post è stato postato sabato, Maggio 2nd, 2009 at 14:53 nella categoria Programmazione, Siti Web, Tecnologia, tutorial. Tags:, , , , .
Puoi seguire tutti i commenti di questo articolo attraverso RSS 2.0 feed. Puoi lasciare un commento, o trackback dal nostro sito.

Lascia un commento

You must be loggati to post a comment.