jQuery animated counter

What would be the easiest way to make an animated counter using jQuery? I need to be able to count up or down. Do I need a plugin to do this or is there a jQuery method that I can use?

What’s the name of the method I should be looking for? Is there a documentation where I can see a live example? This is something new.

@gunhoo93, @camperextraordinaire hey guys would you be so kind to help me understand this code here?

$({countNum: $('.percentage').text()}).animate({countNum: 100}, {
  duration: 2000,
  easing:'linear',
  step: function() {
    $('.percentage').text(Math.floor(this.countNum));
  },
  complete: function() {
    $('.percentage').text(this.countNum);
  }
});

I need a counter function that triggers only when certain event happens. This code works, but it’s an IIFE. How can I turn this into a function that takes the countNum value as a parameter?

I don’t quite understand this syntax $({countNum: $('.percentage').text()}).animate({countNum: 100} It seems like destructuring to me, I understand everything else except for that part.

A click event, but I think I found a better solution to my current problem.

$("#slider").roundSlider({
    sliderType: "min-range",
    radius: 125,
    value: 0,
    circleShape: "pie",
    startAngle: 315,
    width: 12,
    handleSize: "+10",
    mouseScrollAction: true,
    editableTooltip: false,
    tooltipFormat: function (e) {
      let val = e.value;
      return `
      <div class="slider-content">
        <img class="slider-img" src="/img/brightness-control.png" alt="Brightness control icon"> ${val + "%"}
        <span class="slider-text">Brightness</span>
       </div>`;
  },
    drag:function() {
       console.log(this.getValue())
  }
});

This a jQuery plugin called roundSlider, I read the documentation but no luck on how I can store the value generated by the drag event in the roundSlider object.

I mean in the console it works fine but I need that stored in a variable somehow, I think this path would be perfect for me but I can’t see how I can store this value.

$({countNum: $('.percentage').text()}).animate({countNum: 100}, {
  duration: 2000,
  easing:'linear',
  step: function() {
    $('.percentage').text(Math.floor(this.countNum));
  },
  complete: function() {
    $('.percentage').text(this.countNum);
  }
});

I’m not aware of such usage of selector. I hardly know any JQuery. However, based on reading some documentation…

JQuery selector can accept plain object. For example,

const props = { count: 0, name: 'foo' }

const $elem= $(props)

$elem.prop('count') // 0
$elem.prop('name') // foo

In this case, JQuery element is used as a data store rather than some element attached to the DOM. Each key/value pair of the given object is registered as a JQuery object’s property. These properties are meant to be used as a meta-data unrelated to HTML attribute.

The documentation of $.animate(properties, options) seems to suggest that it will change the specified JQuery properties according to properties argument. In this case, the countNum will change along with animation towards 100.

(In fact, the documentation says properties should be CSS properties, but it seems okay to use custom properties as long as they are within the selected JQuery object.)

In summary, the code you posted simply grabs the text value of elements with .percentage class and increments it towards 100 along with the animation. So, you will see the number incrementing linearly towards 100 over the 2 seconds,

This is all I can tell without seeing the code in action.

1 Like

Hopefully this image is self explanatory

If I select Balcony and drag the slider, then the value of that (or this?) element with “percentage” class should be equal to whatever the slider value is.

That’s why I was wondering if there’s a way for me to store the value of the drag function into a variable somehow.

If I do this:

drag: function (args) {
  $('.percentage').text(args.value + '%)
}

Then it will display the value in all the nodes, and not the one that is currently selected which is the desired behavior.