Call a function when a div gets a class | AnimatedNumber()

Question

I was wondering how to create a function that starts once a div gets a class. I have a div which appears when scrolling (its an animation). Once it appears, it gets a class called "in-view".

The idea is to call a function everytime the div gets the class "in-view".

This is the div I'm talking about

When div .numbers gets class "in-view", this function should be called...

Jquery

$(document).ready(function() {
   $('.numbers.in-view .count-text').each(function () {
      var $this = $(this);
    $({ Counter: 0 }).animate({ Counter: $this.text() }, {
        duration: 4000,
        easing: 'swing',
        step: function () {
          $this.text(Math.ceil(this.Counter));
        }
    });
   });
  });


**html**

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-1 numbers animation-element slide-left testimonial">
 <div class="fact-counter">
  <div class="row clearfix">
   <div class="counter-outer clearfix">
    <article class="column col-sm-1">
     <div class="count-icon"><i class="awesome fa-cogs"></i></div>
     <div class="count-outer"><span class="count-text count-1">15</span></div>
     <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
    </article>
    <article class="column col-sm-1">
     <div class="count-icon"><i class="awesome fa-heart-o"></i></div>
     <div class="count-outer">+<span class="count-text count-2">5000</span></div>
     <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
    </article>
    <article class="column col-sm-1">
     <div class="count-icon"><i class="awesome fa-globe-o"></i></div>
     <div class="count-outer"><span class="count-text count-3">482</span></div>
     <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
    </article>
    <article class="column col-sm-1">
     <div class="count-icon"><i class="awesome fa-globe-o"></i></div>
     <div class="count-outer"><span class="count-text count-4">673</span></div>
     <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
    </article>
   </div>
  </div>
 </div>
</div>

Sounds like you want a [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) or an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver), if there’s no easier way. — Sebastian Simon, Apr 09 '18 at 10:26
why not just trigger an event when the div get class `in-view`? — Hikarunomemory, Apr 09 '18 at 10:28
@AlpeshJikadra With this code https://gyazo.com/deec8e1a946ae3673b819fc285ab25d8 Its the one I use to make the div appears — Antonio, Apr 09 '18 at 10:30
Possible duplicate of [How to fire an event on class change using jQuery?](https://stackoverflow.com/questions/19401633/how-to-fire-an-event-on-class-change-using-jquery) — Hikarunomemory, Apr 09 '18 at 10:32
You need to edit the plugin that adds the class - or see if it has a callback function for when the item scrolls into view. But as you haven't create a [mcve] I am voting to close — Pete, Apr 09 '18 at 10:36

SRK · Accepted Answer · 2018-04-09T11:24:48.587

$(document).ready(function() {
        $(document).on("myEvent",function(){
            $('.numbers.in-view .count-text').each(function () {
            var $this = $(this);
            $({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 4000,
                easing: 'swing',
                step: function () {
                  $this.text(Math.ceil(this.Counter));
                }
            });
        });
    });

After $element.addClass("in-view") add this

$(document).trigger("myEvent");

Update

$(document).ready(function() {
            $(document).on("myEvent",function(){
                $('.numbers.in-view .count-text').each(function () {
                var $this = $(this);
                $({ Counter: 0 }).animate({ Counter: parseInt($this.text()) }, {
                    duration: 4000,
                    easing: 'swing',
                    step: function () {
                      $this.text(Math.ceil(this.Counter));
                    }
                });
            });
        });

You need to use parseInt function to parse the value as number in animation function.

Update 2

$(document).ready(function() {
                $(document).on("myEvent",function(){
                    $('.numbers.in-view .count-text').each(function () {
                    $(this).animateNumber({ number: parseInt($this.text()) });
                    });
                });
            });

Update 3

HTML

<div class="col-md-1 numbers animation-element slide-left testimonial">
    <div class="fact-counter">
        <div class="row clearfix">
            <div class="counter-outer clearfix">
                <article class="column col-sm-1">
                    <div class="count-icon"><i class="awesome fa-cogs"></i></div>
                    <div class="count-outer"><span class="count-text count-1">15</span></div>
                    <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
                </article>
                <article class="column col-sm-1">
                    <div class="count-icon"><i class="awesome fa-heart-o"></i></div>
                    <div class="count-outer">+<span class="count-text count-2" data-number="5000">0</span></div>
                    <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
                </article>
                <article class="column col-sm-1">
                    <div class="count-icon"><i class="awesome fa-globe-o"></i></div>
                    <div class="count-outer"><span class="count-text count-3" data-number="482">0</span></div>
                    <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
                </article>
                <article class="column col-sm-1">
                    <div class="count-icon"><i class="awesome fa-globe-o"></i></div>
                    <div class="count-outer"><span class="count-text count-4" data-number="673">0</span></div>
                    <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
                </article>
            </div>
        </div>
    </div>
</div>

JS

$(document).ready(function() {
                    $(document).on("myEvent",function(){
                        $('.numbers.in-view .count-text').each(function () {
                        $(this).animateNumber({ number: parseInt($this.attr("data-number")) });
                        });
                    });
                });

It's not working. The numbers stay in 0 after the div appears — Antonio, Apr 09 '18 at 10:40
Please check update in my answer above. Although this was a problem in your original function. But it should have answered your primary question about triggering an event. @Antonio — SRK, Apr 09 '18 at 10:47
Still not working. Im doing the trigger in this way https://gyazo.com/81c2ee4754e8c989136fdfbb606f3304 @Smit Raval — Antonio, Apr 09 '18 at 10:52
Can you please put an alert in the function $(document).on("myEvent" to check if its getting called? @Antonio — SRK, Apr 09 '18 at 10:54
Then its a problem in your animation function. Which library are you using for counter? @Antonio — SRK, Apr 09 '18 at 10:58
Please check update 2. You are using a completely wrong syntax to animate the number. Try with this simple one. — SRK, Apr 09 '18 at 11:14
The idea of the animation is going from 0 to the wanted number in each div. There's no animation. The numbers are just stopped. What is it suppossed parseInt($this.text()) is gonna print...? @Smit Raval — Antonio, Apr 09 '18 at 11:19
Check out update 3 in my answer. You need to set initial value to 0 and then it will animate from 0 to given number. Set number in data-number attribute of span. @Antonio — SRK, Apr 09 '18 at 11:25

Call a function when a div gets a class | AnimatedNumber()

1 Answers1

Update

Update 2

Update 3

JS