Replacing them with ID selectors, while a complete pain, does fix the problem with the animation.

Also, I have been unable to get the TwinHelix IE PNG Fix to work correctly with this plugin and IE6, so grey backgrounds made everything rather ugly, but working around that was much easier – I just replaced the PNG files with transparent GIFs. Job done!

Thank you very much for the code, as well as its excellent documentation. I am currently in the process of mangling it into a countdown timer for use within our system.

element.css(“left”,-Math.floor((element.width()-50)/2));
element.css(“top”,-Math.floor((element.height()-50)/2));

#fancyClock{
height:50px;
border:0px;
width:150px;
}
.clock{
/* The .clock div. Created dynamically by jQuery */
background-color:white;
height:50px;
width:50px;
position:relative;
overflow:hidden;
float:left;
}

.clock .rotate{
/* There are two .rotate divs – one for each half of the background */
position:absolute;
width:50px;
height:50px;
top:0;
left:0;
}

.rotate.right{
display:none;
z-index:9;
}

.clock .bg, .clock .front{
width:25px;
height:50px;
background-color:white;
position:absolute;
top:0;
}

.clock .display{
/* Holds the number of seconds, minutes or hours respectfully */
position:absolute;
width:50px;
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
z-index:20;
color:black;/*#F5F5F5;*/
font-size:15px;
text-align:center;
top:15px;
left:0;

/* CSS3 text shadow: */
text-shadow:4px 4px 5px #333333;
}

/* The left part of the background: */

.clock .bg.left{ left:0; }

/* Individual styles for each color: */
.orange .bg.left{ background:url(img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(img/bg_green.png) no-repeat left top; }
.blue .bg.left{ background:url(img/bg_blue.png) no-repeat left top; }

/* The right part of the background: */
.clock .bg.right{ left:25px; }

.orange .bg.right{ background:url(img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(img/bg_blue.png) no-repeat right top; }

.clock .front.left{
left:0;
z-index:8;
}

Then it is working fine for Moziall firefox and Google chrome. but it is not working correctly in IE.It just displays the digits… not the circle images….. I have spent lot of time…. but no use… what is the problem with my code.

added another dial:

// The colors of the dials:
var colors = ['pink','blue','orange','green'];

created day dial:

setInterval(function(){

var currentTime = new Date();
currentTime = Date.parse(currentTime);
var futureTime = Date.parse(‘September 23, 2011 12:00:00′);
var dd = futureTime-currentTime;

var d=Math.floor((dd%(60*60*1000*24*365))/(24*60*60*1000)*1);
var h=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
var m=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
var s=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

animation(gVars.green, s, 60);
animation(gVars.orange, m, 60);
animation(gVars.blue, h, 24);
animation(gVars.pink, d, 24);

},1000);

And then, Kris, this is to help hide that other half after 30 secs:

if(angle<=180)
{
// The left part is rotated, and the right is currently hidden:
element = clock.rotateLeft;
clock.rotateRight.hide();
}

Thanks again! See it in action at drumlineapp.com