[d'Anconia]

Yeah I decided the best way to do it was to modify and use a setTimeout function within a for loop. For some reason it seems like it is not going through the loop correctly though. Here is the relevant part of my code:

    function fade(currentTime, newAverage, newColor) {
        if (currentTime <= 5){
            var currentOpacity = 1.0 - (currentTime * .2);
            document.getElementById('rating').style.opacity = currentOpacity;
            document.getElementById('logo').style.width = "500";
        }
        if(currentTime >= 5){
            var ratingAverage = document.getElementById('rating_average');
            ratingAverage.innerHTML = (newAverage);
            //now time to change the ratings color
            var entityRating = document.getElementById('rating');
            entityRating.style.color = newColor;
            var currentOpacity = currentTime * 2 - 1.0;
            document.getElementById('rating').style.opacity = currentOpacity;
            }
        }   

document.getElementById('rating').style.opacity = 1.0;                 
for (var timer = 0; timer < 10; timer++){
    setTimeout(function(){fade(timer, preciseResponseAverage, starResponseColor)}, 100);
    }

I was hoping for a slow fade but am not getting that. Currently it's not even changing the opacity at all when I click on it, nor the color of the text. In fact I added the logo.style.width = 500 line specifically to test to see whether it's even looping at all and it appears that it's not because the logo on the page is not changing to 500px (whether I include the 'px' or not). It's will change the actual rating itself though...

Edit: Heck I even got it to change the color but when it changes there is no opacity fade at all. It's like Javascript is only executing the final part of the loop or something...

PS For the record I am using Chrome.