Can I add more classes with individual widths to this script?

JavaScript
1 
	$('.html').animate(
	    {width:'90%'},
	    {
	        duration: 3000,
	        step: function(now, fx) {
	            if(fx.prop == 'width') {
	                $(this).html(Math.round(now * 100) / 100 + '%');
	            }
	        }
	    }
	);

If i have four progress-bars width individual progress-procents that i want to do a fill-animation on, like this one above, can i add the three other bars to this script or do I have to do this script four times?

And also, if i want to add some text before the (Math.round(now * 100) / 100 + ‘%’); how do I do that? Like if I want it to say “HTML 90%” instead of just “90%” as it outputs now.

fiddle

2

Hi,

You can make a generic animate function and call this for each div with a class of “progress”.

Fiddle

Hope that helps.

3

thanks that helped=)

If I would want this animate to be triggered one time when the element is in view for the first time how would i do this?

4

This should point you in the right direction: http://remysharp.com/2009/01/26/element-in-view-event-plugin/

Let me know if you have a specific question.