HTML and CSS Reference
In-Depth Information
// Stop all animations and set the bar's height to 0
$
.
each
(
bars
,
function
(
i
) {
$
(
bars
[
i
].
bar
).
stop
().
css
(
'height'
,
0
);
});
// Clear timers
clearTimeout
(
barTimer
);
clearTimeout
(
graphTimer
);
// Restart timer
graphTimer
=
setTimeout
(
function
() {
displayGraph
(
bars
,
0
);
},
200
);
}
Let's break
resetGraph()
down:
•
Stop all animations, and set the height of each bar back to 0;
•
Clear out the timers so that there are no stray animations;
•
Wait 200 milliseconds;
•
Call
displayGraph()
to animate the first bar (at index
0
).
Finally, call
resetGraph()
at the bottom of
createGraph()
, and watch the magic happen as
we bask in the glory of our hard work.
Not so fast, sunshine! Before we go any further, we need to put some clothes on.
The CSS
The first thing we need to do is hide the original data table. We could do this in a number of
ways, but because our CSS will load well before the JavaScript, let's do this in the easiest way
possible:
#data-table
{
display
:
none
;
}
