Try the demo.

Header:

link jquery and jQuery color plugin

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

The HTML:

I used a list of links, like a menu, because I want to be able to make them to real links in the future. For now the links are empty. Each link has a class of “c+number” which stands for the color number in the color list we make later in the JavaScript.

<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>

CSS

This part is pretty standard, dark background goes well with this intro.#navigator li a’s position has to be defined. It can either be absolute or relative. Each will give you a different result of animation.

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

A litter harder than my previous post on the cost estimator with UI but still quite short.

Using animation:

animate( Hash params, String|Number speed, String easing, Function callback
(optional) A function to be executed whenever the animation completes.
)
You can use fontSize,color, backgroundColor, width and borderWidth etc. Then define the speed of your animation. You can use strings like slow, fast or integers in milliseconds (1000 =1 second).
here is a simple example:

 $("#myDiv").animate({ color: "pink" }, 500);

Here is our code:

• Line 1:choose the colors you wan to use, put them in an array called menu_over_color
• Line 3:The object I will animate is a under navigator, so select all of them with each:
  

  Each: Execute a function within the context of every matched element.

• Line 4:point the class attribute to our color list in line1. substring(start,stop)for example: the substring(1,3)’s result of “hello” is “hel”. I originally had fifteen colors listed. Here is a more detailed explanation on attr
• Lin5 to 13: animation sequence: change color>font size>position>background color> then settle down to white text and their own background color. This is not the only option, play around with it. You could surprise yourself.
• Last 8 lines are optional. They deal with hover.

Finally, I suggest you read about chained animation and unqueued animation animation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* the colors */
var menu_over_colors = ["#ffffff","#55C7FF","#FF5A8D","#FFA324","#f453g5"];/* the colors you want to use*/
$(document).ready(function(){
$("#navigator > li > 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 > li > 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);
		}); 
});