Close Encounters JQuery…

@PrimalscientistJul 12.2011

Hi all,

If I have a grid / wall of 6 x 6 black squares, and I wanted them to change colour in a random way, one at a time. Has anyone seen any JQuery / JavaScript code for this type of animation?

Sorry to be a bit bleak, it would sort of be like the Close Encounters ending!! LOL!! ?

Regards,

Daz.

to post a comment

JavaScript

18 Comments(s) _↴

@rnd_meJul 12.2011 — #write a function that changes a div's background to a random color.

apply that function to a list of divs using setInterval.

here's a little help with getting a color:

[CODE]function Rnd(w) {return parseInt(Math.random() * (w + 1));}
 function rndcol() { return Rnd(255).toString(16);}
 function rndcolor(){ return "#" +  rndcol()  +  rndcol()  +  rndcol() ;}[/CODE]

rndcolor() returns a random color.

use jQuery/dom to collect tags by id, class, or tagName.

@PrimalscientistauthorJul 12.2011 — #Thanks, that is great!!

What if I wanted to change it, and decided to make the top right square to turn blue, and then revert back to its original colour, and then moves to another, say the second row, and the third column?

Thanks for this though!!

Daz.

@rnd_meJul 12.2011 — #some random ideas:

-set a default color using css and an id attrib. you can then set element.style.backgroundColor to something to over-ride, or "" to revert back to the css default.

-i would play with jQuery, specifically checking out the traversal methods it offers.

using one or more traversals would make it easier to apply to certain groups of tags.

-a table is easier than divs to "walk" between cells by direction; every cell has a cellIndex, and every row has a rowIndex, so you can move up and to the right easily: (rowIndex - 1, cellIndex + 1)...

@PrimalscientistauthorJul 12.2011 — #Thank you for your help here. I am not a developer, at least not yet as I am studying at university. I have never coded JQuery, but have sort of tweaked things I have downloaded. Thanks for taking the time to look at my problem though.

Daz.

@jamesbcox1980Jul 12.2011 — #You mean something like this? ? It's got the jQuery Color Animations plugin (official) to mimic the lights turning on and off. Fun to write!

[code=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>Close Encounters Animation</title>
 <style type="text/css">
 body {
 background-color: #000000;
 }
 .wrapper {
 padding: 5px;
 margin: 5px;
 border: 1px solid #999;
 width: 720px;
 height: 120px;
 }
 .row {
 clear: both;
 height: 15%;
 margin: 0;
 padding: 0;
 }
 .cell {
 float: left;
 height: 100%;
 width: 16.38%;
 margin: 0;
 border: 1px solid #111;
 background-color: #000000;
 }
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script type="text/javascript">
 /*
 * jQuery Color Animations
 * Copyright 2007 John Resig
 * Released under the MIT and GPL licenses.
 */
 (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]= function(fx){if ( fx.state == 0 ){fx.start = getColor( fx.elem,attr );fx.end = getRGB( fx.end );}fx.elem.style[attr]= "rgb(" + [Math.max(Math.min( parseInt((fx.pos * (fx.end[0]- fx.start[0]))+ fx.start[0]),255),0),Math.max(Math.min( parseInt((fx.pos * (fx.end[1]- fx.start[1]))+ fx.start[1]),255),0),Math.max(Math.min( parseInt((fx.pos * (fx.end[2]- fx.start[2]))+ fx.start[2]),255),0)].join(",")+ ")";}});function getRGB(color){var result;if ( color && color.constructor == Array && color.length == 3 )return color;if (result = /rgb(s*([0-9]{1,3})s*,s*([0-9]{1,3})s*,s*([0-9]{1,3})s*)/.exec(color))return [parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if (result = /rgb(s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*)/.exec(color))return [parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))return [parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))return [parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];return colors[jQuery.trim(color).toLowerCase()];}function getColor(elem,attr){var color;do {color = jQuery.curCSS(elem,attr);if ( color != '' && color != 'transparent' || jQuery.nodeName(elem,"body"))break;attr = "backgroundColor";}while ( elem = elem.parentNode );return getRGB(color);};var colors = {aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]};})(jQuery);
 </script>
 <script type="text/javascript">
 var o_timer, n_interval;
 //Set the colour change interval in milliseconds:
 n_interval = 200;
 
 function randomize(mini, maxi) {
 return Math.round(Math.random() * (maxi - mini)) + mini;
 }
 
 function toHex(n) {
 var nlz = n.toString(16);
 return nlz.length == 2 ? nlz : '0' + nlz;
 }
 
 function randomColor() {
 return '#' + toHex(randomize(150, 255)) + toHex(randomize(150, 255)) + toHex(randomize(0, 200));
 }
 
 function changeColour() {
 var cells = $('.cell'), cl = cells.length, cn = randomize(0, cl - 1);
 $($('.cell')[cn]).animate( { backgroundColor : randomColor() }, 100)
 .animate( {backgroundColor : '#000000'}, 1000);
 }
 
 $(document).ready(function () {
 o_timer = setInterval("changeColour()", n_interval); 
 });
 </script>
 </head>
 <body>
 <div class="wrapper">
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 </div>
 </body>
 </html>[/code]

@PrimalscientistauthorJul 12.2011 — #YOU LEGEND!! THIS IS IT!!

Right, I just need to manipulate it so that I can tell the JQ what cells to highlight.

Thank you big time!!!!!!!!!!! ?

@PrimalscientistauthorJul 12.2011 — #Would you happen to know how I could manipulate the code, so that I can determine what cell changes colour? And when?

Thanks again for this!! ?

Daz.

@jamesbcox1980Jul 12.2011 — #haha no problem... I enjoyed playing with it. You can see that I used the random number generator to decide what cell to highlight and a timer to loop through it, but you could just as easily delete the setInterval and simply highlight a cell by row and column number with a little math.

Since the index of the cell starts with 0 and goes to 35, simply use this formula:

((row - 1) * 6) + (column - 1)

and replace the function with:

[CODE]function changeColour(row, column) {
 var cn = ((row - 1) * 6) + (column - 1);
 $($('.cell')[cn]).animate( { backgroundColor : randomColor() }, 100)
 .animate( {backgroundColor : '#000000'}, 1000);
 }[/CODE]

So if you want to highlight row 3, column 3, call it with changeColour(3, 3) so that it will target the 14th cell. You can also change the min and max color ranges for red, green, and blue in the randomColor() function (sorry i switched between european and american spellings by accident ?)

@PrimalscientistauthorJul 12.2011 — #This is great. Its Christmas Day for me here. Thanks so much!! ?

I will do this and let you know how I get on!!

@jamesbcox1980Jul 12.2011 — #Awesome, I'm curious to see what you do with it at the end. rnd_me mentioned that tables were easier to traverse than divs, so I kind of wanted to find a way around that (trying to completely eliminate tables from my layout vocabulary haha).

Let me know if you have questions about how to manipulate it. I kind of got carried away and just wrote the whole thing rather than just giving you something to work with.

@PrimalscientistauthorJul 12.2011 — #You really dont know how much you helped me. ?

I seem to be doing something wrong, have replaced the function changeColour but it dont seem to be working??

Also, I have already manipulated the rows and cells. Now there are 4 rows and 4 cells.

@PrimalscientistauthorJul 12.2011 — #Take a look...

[Code]
 <!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>Close Encounters Animation</title>
 <style type="text/css">
 body {
 background-color: #000000;
 }
 .wrapper {
 padding: 5px;
 margin: 5px;
 border: 1px solid #999;
 width: 410px;
 height: 210px;
 }
 .row {
 clear: both;
 height: 50px;
 margin: 0;
 padding: 0;
 }
 .cell {
 float: left;
 height: 50px;
 width: 100px;
 margin: 0;
 border: 1px solid #FFF;
 background-color: #000000;
 }
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script type="text/javascript">
 /*
 * jQuery Color Animations
 * Copyright 2007 John Resig
 * Released under the MIT and GPL licenses.
 */
 (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]= function(fx){if ( fx.state == 0 ){fx.start = getColor( fx.elem,attr );fx.end = getRGB( fx.end );}fx.elem.style[attr]= "rgb(" + [Math.max(Math.min( parseInt((fx.pos * (fx.end[0]- fx.start[0]))+ fx.start[0]),255),0),Math.max(Math.min( parseInt((fx.pos * (fx.end[1]- fx.start[1]))+ fx.start[1]),255),0),Math.max(Math.min( parseInt((fx.pos * (fx.end[2]- fx.start[2]))+ fx.start[2]),255),0)].join(",")+ ")";}});function getRGB(color){var result;if ( color && color.constructor == Array && color.length == 3 )return color;if (result = /rgb(s*([0-9]{1,3})s*,s*([0-9]{1,3})s*,s*([0-9]{1,3})s*)/.exec(color))return [parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if (result = /rgb(s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*)/.exec(color))return [parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))return [parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))return [parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];return colors[jQuery.trim(color).toLowerCase()];}function getColor(elem,attr){var color;do {color = jQuery.curCSS(elem,attr);if ( color != '' && color != 'transparent' || jQuery.nodeName(elem,"body"))break;attr = "backgroundColor";}while ( elem = elem.parentNode );return getRGB(color);};var colors = {aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]};})(jQuery);
 </script>
 <script type="text/javascript">
 var o_timer, n_interval;
 //Set the colour change interval in milliseconds:
 n_interval = 900;
 
 function randomize(mini, maxi) {
 return Math.round(Math.random() * (maxi - mini)) + mini;
 }
 
 function toHex(n) {
 var nlz = n.toString(16);
 return nlz.length == 2 ? nlz : '0' + nlz;
 }
 
 function randomColor() {
 return '#' + toHex(randomize(150, 255)) + toHex(randomize(150, 255)) + toHex(randomize(0, 200));
 } 
 /*
 function changeColour() {
 var cells = $('.cell'), cl = cells.length, cn = randomize(0, cl - 1);
 $($('.cell')[cn]).animate( { backgroundColor : randomColor() }, 100)
 .animate( {backgroundColor : '#000000'}, 1000);
 }*/
 
 function changeColour(row, column) {
 var cn = ((row - 1) * 4) + (column - 1);
 $($('.cell')[cn]).animate( { backgroundColor : randomColor() }, 100)
 .animate( {backgroundColor : '#000000'}, 1000);
 }
 
 $(document).ready(function () {
 o_timer = setInterval("changeColour()", n_interval); 
 });
 </script>
 </head>
 <body>
 <div class="wrapper">
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 
 </div>
 </body>
 </html>
 [/Code]

@jamesbcox1980Jul 12.2011 — #If you change the number of rows and cells, you'll want to adjust the CSS to compensate. I didn't create a very fluid layout with the rectangle, but you can play with the width of the cells and the height of the rows to compensate by trial and error.

If you change the number of cells in each row, don't forget to change the math to match it:

((row - 1) * [B][COLOR="Red"]4[/COLOR][/B]) + (column - 1)

You could easily write in something to count the columns in each row of course.

Also, the replacement function I gave you assumes you are deleting the setInterval section of the code and calling the function manually using some button, link, or sequence of events on your page.

@PrimalscientistauthorJul 12.2011 — #No worries about the layout, I can get that sorted!! ?

@PrimalscientistauthorJul 13.2011 — #Thanks for all your help James. I really appreciate it.

Keep an eye on your inbox and I will tell you why I need it...

Best,

Daz.

@PrimalscientistauthorJul 13.2011 — #Here is the latest code:

[Code]
 <!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>Close Encounters Animation</title>
 <style type="text/css">
 body {
 background-color: #2a2a2a;
 }
 .wrapper {
 padding: 15px;
 margin: 10px;
 border: 2px solid #111;
 width: 635px;
 height: 230px;
 -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px; 
 background-color: #222;
 }
 .row {
 clear: both;
 height: 50px;
 margin: 0;
 padding: 0;
 }
 .cell {
 float: left;
 height: 50px;
 width: 150px;
 margin: 1px;
 border: 3px solid #111;
 background-color: #191919;
 -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px; 
 }
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script type="text/javascript">
 /*
 * jQuery Color Animations
 * Copyright 2007 John Resig
 * Released under the MIT and GPL licenses.
 */
 (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]= function(fx){if ( fx.state == 0 ){fx.start = getColor( fx.elem,attr );fx.end = getRGB( fx.end );}fx.elem.style[attr]= "rgb(" + [Math.max(Math.min( parseInt((fx.pos * (fx.end[0]- fx.start[0]))+ fx.start[0]),255),0),Math.max(Math.min( parseInt((fx.pos * (fx.end[1]- fx.start[1]))+ fx.start[1]),255),0),Math.max(Math.min( parseInt((fx.pos * (fx.end[2]- fx.start[2]))+ fx.start[2]),255),0)].join(",")+ ")";}});function getRGB(color){var result;if ( color && color.constructor == Array && color.length == 3 )return color;if (result = /rgb(s*([0-9]{1,3})s*,s*([0-9]{1,3})s*,s*([0-9]{1,3})s*)/.exec(color))return [parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if (result = /rgb(s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*)/.exec(color))return [parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))return [parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))return [parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];return colors[jQuery.trim(color).toLowerCase()];}function getColor(elem,attr){var color;do {color = jQuery.curCSS(elem,attr);if ( color != '' && color != 'transparent' || jQuery.nodeName(elem,"body"))break;attr = "backgroundColor";}while ( elem = elem.parentNode );return getRGB(color);};var colors = {aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]};})(jQuery);
 </script>
 <script type="text/javascript">
 var o_timer, n_interval;
 //Set the colour change interval in milliseconds:
 n_interval = 900;
 
 function randomize(mini, maxi) {
 return Math.round(Math.random() * (maxi - mini)) + mini;
 }
 
 function toHex(n) {
 var nlz = n.toString(16);
 return nlz.length == 2 ? nlz : '0' + nlz;
 }
 
 function randomColor() {
 return '#' + toHex(randomize(150, 255)) + toHex(randomize(150, 255)) + toHex(randomize(0, 200));
 }
 /*
 function changeColour() {
 var cells = $('.cell'), cl = cells.length, cn = randomize(0, cl - 1);
 $($('.cell')[cn]).animate( { backgroundColor : randomColor() }, 100)
 .animate( {backgroundColor : '#191919'}, 1000);
 } 
 */
 function changeColor(row, column) {
 var cn = ((row - 1) * 4) + (column - 1);
 $($('.cell')[cn]).animate( { backgroundColor : randomColor() }, 100)
 .animate( {backgroundColor : '#191919'}, 1000);
 }
 
 /*$(document).ready(function () {
 o_timer = setInterval("changeColor()", n_interval); 
 });*/
 </script>
 </head>
 <body>
 <div class="wrapper">
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 
 </div>
 </body>
 </html>
 [/Code]

@jamesbcox1980Jul 13.2011 — #

[code=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>Close Encounters Animation</title>
 <style type="text/css">
 body {
 background-color: #000000;
 }
 .wrapper {
 padding: 5px;
 margin: 5px;
 border: 1px solid #999;
 width: 720px;
 height: 120px;
 }
 .row {
 clear: both;
 height: 23.8&#37;;
 margin: 0;
 padding: 0;
 }
 .cell {
 float: left;
 height: 100%;
 width: 24.7%;
 margin: 0;
 border: 1px solid #111;
 background-color: #000000;
 }
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script type="text/javascript">
 /*
 * jQuery Color Animations
 * Copyright 2007 John Resig
 * Released under the MIT and GPL licenses.
 */
 (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]= function(fx){if ( fx.state == 0 ){fx.start = getColor( fx.elem,attr );fx.end = getRGB( fx.end );}fx.elem.style[attr]= "rgb(" + [Math.max(Math.min( parseInt((fx.pos * (fx.end[0]- fx.start[0]))+ fx.start[0]),255),0),Math.max(Math.min( parseInt((fx.pos * (fx.end[1]- fx.start[1]))+ fx.start[1]),255),0),Math.max(Math.min( parseInt((fx.pos * (fx.end[2]- fx.start[2]))+ fx.start[2]),255),0)].join(",")+ ")";}});function getRGB(color){var result;if ( color && color.constructor == Array && color.length == 3 )return color;if (result = /rgb(s*([0-9]{1,3})s*,s*([0-9]{1,3})s*,s*([0-9]{1,3})s*)/.exec(color))return [parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if (result = /rgb(s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*,s*([0-9]+(?:.[0-9]+)?)%s*)/.exec(color))return [parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))return [parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))return [parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];return colors[jQuery.trim(color).toLowerCase()];}function getColor(elem,attr){var color;do {color = jQuery.curCSS(elem,attr);if ( color != '' && color != 'transparent' || jQuery.nodeName(elem,"body"))break;attr = "backgroundColor";}while ( elem = elem.parentNode );return getRGB(color);};var colors = {aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]};})(jQuery);
 </script>
 <script type="text/javascript">
 var o_sequence, b_runAnimation = true, i_count = 0;
 
 a_sequence = [
 {
 'color' : 'yellow',
 'row' : 2,
 'column' : 2,
 'length' : 400
 },
 {
 'color' : 'green',
 'row' : 3,
 'column' : 3,
 'length' : 400
 },
 {
 'color' : 'blue',
 'row' : 3,
 'column' : 1,
 'length' : 400
 },
 {
 'color' : 'white',
 'row' : 1,
 'column' : 4,
 'length' : 400
 },
 {
 'color' : 'orange',
 'row' : 4,
 'column' : 2,
 'length' : 1200
 },
 {
 //a short pause
 'color' : 'black',
 'row' : 1,
 'column' : 1,
 'length' : 800
 }
 ]
 
 function changeColour() {
 var cells = $('.cell'), seqNo = a_sequence[i_count],
 cellNo = ((seqNo.row - 1) * $('.row:first .cell').length) + (seqNo.column - 1);
 
  if (b_runAnimation) {
   $(cells[cellNo]).animate( { backgroundColor : seqNo.color }, 100)
   .animate( {backgroundColor : '#000000'}, {
   duration : seqNo.length,
   complete : function() {
   i_count++;
   if (i_count > (a_sequence.length - 1)) i_count = 0;
   changeColour();
   }
   });
  } else {
   i_count = 0;
  }
 }
 
 $(document).ready(function () {
 changeColour();
 });
 </script>
 </head>
 <body>
 <div class="wrapper">
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 <div class="row">
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 <div class="cell"> </div>
 </div>
 </div>
 </body>
 </html>
 [/code]

@PrimalscientistauthorJul 13.2011 — #James:

That is fantastic. Thanks ever so much for helping me.

Once I complete it, I will send you a link [Share] from my mobile me account.

I need to get on the JQuery site as I have loads of questions that need answering.

Thanks again!!

Daz.

Also in #JavaScript _↴

multiple galleries on one page using this script...how?setInterval maximum millisecond Shuffling an Array

Success!

Help @Primalscientist spread the word by sharing this article on Twitter...

Tweet This

Close Encounters JQuery…

18 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Close Encounters JQuery…

18 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #JavaScript _↴