jQuery animated counter

JavaScript
1

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?

2

Should be able to do it all with just jQuery.

3

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.

4

I am not aware of a method that creates an animated counter, but you can create your own using jQuery. You can search around for a jQuery plugin that someone might have already created.

5

@gunhoo93, @RandellDawson 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.

6

This is a very generic request. What event will trigger the animated counter? What is the counter counting?

7

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.

8 
$({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
9

What do you plan to do with the value based on the drag function?

10

Looking at the documentation and examples, you could do something like the following. You can drag the slider to a specific value and then click the first button and it will get and display the current value of the slider. If you click the Mute button, then it will set a value of zero for the slider and display the new value of zero.

HTML

<button id="display-btn">Get Slider Value</button> <button id="mute-btn">Mute</button>
<p></p>
<div id='slider'></div>

JS

$("#slider").roundSlider({
  sliderType: "min-range",
  radius: 125,
  value: 0,
  circleShape: "pie",
  startAngle: 315,
  width: 12,
  handleSize: "+10",
  mouseScrollAction: true,
  editableTooltip: false,
  tooltipFormat: ({value: val}) => `
    <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>`
});

$("#display-btn").click(() => {
  const obj1 = $("#slider").data("roundSlider");
  const value = obj1.getValue();
  $("p").text(value);  
});

$("#mute-btn").click(() => {
  const obj1 = $("#slider").data("roundSlider");
  const value = 0;
  obj1.setValue(value);
  $("p").text(value);
});
11

Hopefully this image is self explanatory

50%20PM
50%20PM1120Ă—622 53.8 KB

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.

12