HTML and CSS Reference
In-Depth Information
}
}
// Reset graph settings and prepare for display
function
resetGraph
() {
// Set bar height to 0 and clear all transitions
$
.
each
(
bars
,
function
(
i
) {
$
(
bars
[
i
].
bar
).
stop
().
css
({
'height'
:
0
,
'-webkit-transition'
:
'none'
});
});
// Clear timers
clearTimeout
(
barTimer
);
clearTimeout
(
graphTimer
);
// Restart timer
graphTimer
=
setTimeout
(
function
() {
displayGraph
(
bars
,
0
);
},
200
);
}
Here are the main things we've changed:
•
Set the height of the bars via the jQuery
css()
function, and allowed CSS transitions to
take care of the animation;
•
When resetting the graph, turned transitions off so that the height of the bars is instantly
set to 0.
18
Check out the example
if you have the latest version of Safari or Chrome installed.
ULTRA-MEGA WEBKIT BONUS: NOW IN 3-D!
19
For a sneak peek of what the future holds,
check out a little experiment
that I put together,
with a 3-D effect and CSS transforms. Again, it requires the latest versions of Safari or
Chrome:
As in our previous Webkit example, there are
no images
, and
all animation is handled via
CSS
.
Kiss my face!
20
