Animated Rectangles by jQuery

crecs.md

• jQuery

function DeLight(dly,clr,eq)
{
    setTimeout(function(){
        $('li:eq('+eq+')').find('div').css('background',clr);
    },dly);
}

DeLight(100,'orange',0);
DeLight(200,'purple',1);
DeLight(300,'black',2);
DeLight(400,'blue',3);
DeLight(500,'green',4);

DeLight(600,'#fff',4);
DeLight(700,'#fff',3);
DeLight(800,'#fff',2);
DeLight(900,'#fff',1);
DeLight(1000,'#fff',0);

DeLight(1100,'orange',0);
DeLight(1200,'purple',1);
DeLight(1300,'black',2);
DeLight(1400,'blue',3);
DeLight(1500,'green',4);

DeLight(1600,'#fff',4);
DeLight(1700,'#fff',3);
DeLight(1800,'#fff',2);
DeLight(1900,'#fff',1);
DeLight(2000,'#fff',0);

DeLight(2100,'orange',0);
DeLight(2200,'purple',1);
DeLight(2300,'black',2);
DeLight(2400,'blue',3);
DeLight(2500,'green',4);

DeLight(2600,'#fff',4);
DeLight(2700,'#fff',3);
DeLight(2800,'#fff',2);
DeLight(2900,'#fff',1);
DeLight(3000,'#fff',0);

DeLight(3100,'orange',0);
DeLight(3200,'purple',1);
DeLight(3300,'black',2);
DeLight(3400,'blue',3);
DeLight(3500,'green',4);

DeLight(3600,'#fff',4);
DeLight(3700,'#fff',3);
DeLight(3800,'#fff',2);
DeLight(3900,'#fff',1);
DeLight(4000,'#fff',0);

• HTML

<ul>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ul>

• CSS

* { margin: 0; padding: 0; }
ul { list-style: none; }
ul li { float: left; }
li div { 
    width: 10px; 
    height: 10px; 
    background: #fff; 
}