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
() {
