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 loop:

for(i = 1; i <= 100; i++)

but to have a it come back down

for(i = 100; i == 100; i--)

I’m just not sure how to put them together to make the variable i go to 100 then decrease back down to 0?

Answer 1

You’re looking for:

for(i = 100; i >= 0; i--)

But you could just do this slideUp:

$('someElement')
    .hide()
    .slideDown(500, function () {
        $(this).slideUp(500);
    });

The above would animate the element like you want. That code equates to roughly the following, in case you even want to do more complicated animate animations:

$('someElement')
   .hide()
   .animate({ height: '100%' }, 500, function () {
        $(this).animate({ height: 0 }, 500);
    });

Update: Here is a jsFiddle demonstration.