Create An Animated Bar Graph With HTML, CSS And jQuery - Practical JavaScript Techniques - page 71

Again, refer to Surfin' Safari for more information on -webkit-transition and CSS3

17

animation.

Here's an example:

.bar span {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.0,
#fff), color-stop(1.0, #e5e5e5)) ;
display : block ;
opacity : 0 ;

-webkit-transition : all 0.2s ease-out ;

}

.bar:hover span {
opacity : 1 ;

}

When you hover over the bar, the margin and opacity of the pop-up will change. This triggers a
transition event according to the properties we have set. Very cool.

Thanks to -webkit-transition , we can simplify our JavaScript functions a bit:

// Set individual height of bars
function displayGraph ( bars , i ) {
// Changed the way we loop because of issues with $.each not resetting
properly
if ( i < bars . length ) {
// Add transition properties and set height via CSS
$ ( bars [ i ]. bar ). css ({ 'height' : bars [ i ]. height , '-webkit-transition' : 'all
0.8s ease-out' });
// Wait the specified time, then run the displayGraph() function again
for the next bar
barTimer = setTimeout ( function () {
i ++ ;
displayGraph ( bars , i );
}, 100 );