Remember those days which almost every website has a Flash intro or header that makes you wait un… forever. Now more and more people are using jQuery’s animation function to make their sites interesting. Let’s see how we do it.

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);
		}); 
});

ADD TO

If this helps, why not tell your friends?

• 
• 
• 
• 
• 
• 
• 
• 
• 
•