CODEWITHSUNDEEP
javascriptjquerycss
Vadim Badea
Vadim Badea

Reputation: 449

Animate progress bars upwards

I am looking to animate this progress bars, but I'm having a different behavior using jQuery animate() method. I want to animate the progress bars one by one with a 0.1s delay. I will need help with choosing the right animation, because now my animation is behaving downwards. I'd like to do it in the simplest way possible.

Here is what I have so far:

$('.vertical-bars .progress-fill span').each(function() {
    var percent = $(this).html();
    var pTop = 100 - (percent.slice(0, percent.length - 1)) + "%";

    $(this).parent().css({
        'height': percent,
        'top': pTop
    });
    $(this).parent().animate({
        height: "toggle"
    }, {
        duration: 900,
        specialEasing: {
            height: "swing"
        }
    });
});

I have prepared a JSFiddle with my progress bars HERE.

The right behavior is to fill the progress-bars upwards, like in THIS example.

Upvotes: 2

Views: 329

Answers (3)

Fabian Horlacher
Fabian Horlacher

Reputation: 1929

The simplest and most performing way to invert the animation direction is to align the bars at the bottom with css:

vertical-bars .progress-fill {
  position: absolute;
  bottom: 0;
}

Then you don't need to set the top any more with jQuery and set a delay:

$('.vertical-bars .progress-fill').each(function (index) {
    var percentage = $(this).find('.percentage').html();
    $(this).delay(index * 100).animate(
        {
            height: percentage
        }, {
            duration: 900,
            done: function () {
                $(this).find('span').show("normal");
            }
        }
    );
});

jsfiddle

Upvotes: 1

Euan Smith
Euan Smith

Reputation: 2192

You need to animate both the height and top of your bars, or you need to construct them such that they are pinned to the horizontal axis when you change the height. The second takes a little more thought, but the first, although not as elegant, is straight forward.

To animate top you can't use toggle (as it is animating to 100% and back, not to 0), so you will need to animate both the shrink and grow separately using done to trigger a second animation. Taking the same style as you used above:

$('.vertical-bars .progress-fill span').each(function () {
    var percent = $(this).html();
    var pTop = 100 - ( percent.slice(0, percent.length - 1) ) + "%";
    $(this).parent().css({
        'height': percent,
        'top': pTop
    });
  var self=this;
    $(this).parent().animate({
    height: 0,
    top: "100%"
  }, {
    duration: 900,
    specialEasing: {
      height: "swing",
      top: "swing"
    },
    done:function(){
        $(self).parent().animate({
        height: percent,
        top: pTop
      }, {
        duration: 900,
        specialEasing: {
          height: "swing",
          top: "swing"
        }     
      })
    }
    });  
});

Of course you can also achieve the same thing using css animation. If I have time to figure it out I'll post an edit.

Upvotes: 2

martin
martin

Reputation: 96891

I don't know what height: "toggle" does but you basically want to set 0 height and 100% offset from top and then start animation that adjusts both styles.

The 100ms between animations is done simply by using setTimeout and incrementing the timeout.

https://jsfiddle.net/kss1su0b/1/

var elm = $(this).parent();

elm.css({
    'top': '100%',
    'height': 0
});

setTimeout(function() {
    elm.animate({
        'height': percent,
        'top': pTop
    }, {
        duration: 900,
        specialEasing: {
            height: "swing"
        },
    });
}, animOffset);

animOffset += 100;

Upvotes: 1

Related Questions