Move progress bars in an upward direction

Question

Move progress bars in an upward direction

Having trouble animating progress bars with jQuery? I am facing a unique issue where my progress bars are behaving in an unexpected way when using the jQuery animate() method. My goal is to animate each progress bar individually with a 0.1s delay. I need guidance on selecting the appropriate animation effect as my current one seems to be moving downwards. Can someone assist me in achieving this in the simplest manner possible?

Below is my current code snippet:

$('.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"
        }
    });
});

You can view and test my progress bars setup on JSFiddle HERE.

The desired behavior should see the progress bars filling upwards, similar to the example provided HERE.

javascript jquery css

Answer 1

Answer №1

In order to create a dynamic effect for your bars, you have the option to animate both the height and top attributes simultaneously or ensure that they remain fixed to the horizontal axis while changing height. The latter method may require more careful consideration, whereas the former approach, although less elegant, is more straightforward.

When animating the top attribute, using toggle won't suffice since it animates from 100% to zero and back, instead of to zero. Therefore, you will need to separately animate the shrink and grow actions by utilizing the 'done' function to trigger a second animation. Here is an example similar to what you previously implemented:

$('.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"
        }     
      })
    }
    });  
});

Alternatively, achieving the same effect can be done through CSS animations. If time permits, I will explore this further and provide an updated solution.

Answer 2

In order to create a dynamic effect for your bars, you have the option to animate both the height and top attributes simultaneously or ensure that they remain fixed to the horizontal axis while changing height. The latter method may require more careful consideration, whereas the former approach, although less elegant, is more straightforward.

When animating the top attribute, using toggle won't suffice since it animates from 100% to zero and back, instead of to zero. Therefore, you will need to separately animate the shrink and grow actions by utilizing the 'done' function to trigger a second animation. Here is an example similar to what you previously implemented:

$('.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"
        }     
      })
    }
    });  
});

Alternatively, achieving the same effect can be done through CSS animations. If time permits, I will explore this further and provide an updated solution.

Answer 3

Answer №2

The function height: "toggle" serves to toggle the height property, where you can set it to 0 and offset it by 100% from the top before triggering an animation that adjusts these styles.

To introduce a 100ms delay between animations, the script utilizes setTimeout while incrementing the timeout for each subsequent animation.

For a working example, check out this link: 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;

Answer 4

The function height: "toggle" serves to toggle the height property, where you can set it to 0 and offset it by 100% from the top before triggering an animation that adjusts these styles.

To introduce a 100ms delay between animations, the script utilizes setTimeout while incrementing the timeout for each subsequent animation.

For a working example, check out this link: 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;

Answer 5

Answer №3

To reverse the animation direction effectively, it is recommended to use CSS to align the bars at the bottom:

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

By doing so, there is no need to adjust the top using jQuery or set a delay anymore:

$('.progress-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");
            }
        }
    );
});

Check out the working example on jsfiddle here.

Answer 6

To reverse the animation direction effectively, it is recommended to use CSS to align the bars at the bottom:

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

By doing so, there is no need to adjust the top using jQuery or set a delay anymore:

$('.progress-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");
            }
        }
    );
});

Check out the working example on jsfiddle here.

Move progress bars in an upward direction

Answer №1

Answer №2

Answer №3

Similar questions

Error in AngularJS and TypeScript: Property 'module' is undefined and cannot be read

Changing the color of a selected variant in a BootstrapVue table using Vue.js

Execute JavaScript using jQuery in noconflict mode, triggering the function instantly and resizing it again when necessary

Create an SVG timeline representation

Using Node Express.js to access variables from routes declared in separate files

What is stopping me from sending data via POST - Express?

Missing sidebar display

What is the best way to create a single title that is expressed in two distinct languages

Looking for a jQuery tool that transforms a standard table into a sortable masterpiece?

The responsiveness of Bootstrap 4 col-6 grids does not match that of col-xs-6 grids

When performing the operation number.tofixed in Typescript, it will always return a string value instead of a double datatype as expected from parseFloat

What could be causing my function to not loop properly without any errors being displayed?

How to verify that the user is using the most up-to-date version of the application in React Native

Retrieve the initial element from each string within an array using JavaScript

The placement of text within a <div>

Utilizing an undefined constant in angular programming may lead to unexpected errors

The functionality of a pop-up window is not compatible with Google Maps

Using Unobtrusive Ajax, learn to integrate data-ajax-confirm with sweetalert

I am interested in altering the font color

Ways to access the variables of an object that initiated a function, leading to another function being called