animating an element's height using jquery

Question

I have some bars that are filled with a height %, but right when the page loads I would like all the bars to fill up and then decrease to 0. I know how to fill it up with a for

Answer 1

If you are trying to animate the height of an object then I think you want the .animate() function of jQuery:

$('.bar-elements').animate({ height : '100%' }, 1500, function () {
    $(this).animate({ height : 0 }, 1500);
});

or alternatively you can use the slideUp/slideDown functions that do this already:

$('.bar-elements').hide().slideDown(1500, function () {
    $(this).slideUp(1500);
});

Docs for .animate(): http://api.jquery.com/animate

Docs for .slideUp(): http://api.jquery.com/slideup