HTML and CSS Reference
In-Depth Information
for the next bar
barTimer = setTimeout ( function () {
i ++ ;
displayGraph ( bars , i );
}, 100 );
What's that you say? “Why aren't you using the $.each function like you have everywhere
else?” Good question. First, let's discuss what the displayGraph() function does, then why it
is the way it is.
The displayGraph() function accepts two parameters:
The bars to loop through,
An index ( i ) from which to start iterating (starting at 0 ).
Let's break down the rest:
If the value of i is less than the number of bars, then keep going;
Get the current bar from the array using the value of i ;
Animate the height property (calculated as a percentage and stored in bars[i].height );
Wait 100 milliseconds;
Increment i by 1 and repeat the process for the next bar.
“So, why wouldn't you just use the $.each function with a delay() before the animation?”
You could, and it would work just fine… the first time. But if you tried to reset the animation via
the “Reset graph” button, then the timing events wouldn't clear properly and the bars would
animate out of sequence.
Moving on, here's resetGraph() :
// Reset graph settings and prepare for display
function resetGraph () {
Search WWH ::

Custom Search