This code snippet applies delays but doesn't seem to update the style changes until the loop completes:
for (i=20;i>=0;i--) {
var boxShadow = i+"px "+i+"px "+i+"px #888";
$('article').css("box-shadow", boxShadow);
sleep(20);
}
function sleep(ms)
{
var dt = new Date();
dt.setTime(dt.getTime() + ms);
while (new Date().getTime() < dt.getTime());
}
The following code doesn't apply delays at all:
for (i=20;i>=0;i--) {
var boxShadow = i+"px "+i+"px "+i+"px #888";
$('article').delay(500).css("box-shadow", boxShadow);
}
Is there a simpler way to achieve this using CSS3 transitions? Could it be that I am making a small jQuery mistake in the delay example?
I appreciate any assistance with this issue.