Resetowanie zawartosci elementu div przez skrypt - ldaczego

Witam, mam następujący kłopot w stronie w divie mam umieszczoną wartość za pomocą php:

<div class="count_stop ST_num"> 
  <?php echo $num_routes; ?>
 </div>

za pomoca funkcji:

var $animation_elements_3 = $('.count_stop');

  $.each($animation_elements_3, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
      $element.addClass('count_start');       
    } else {
      $element.removeClass('count_start');
    }
  });

sprawdzam czy element o zadanej klasie (w tym wypadku "count_stop") jest w oszarze viewportu, a jezeli tak dodaje mu klasę count_start


Chciałbym by zmiana klasy a własciwie dodanie do <div> klasy count_start odpalało skrypt odliczjący do włąsciwej wartości....załączony poniżej 

...
$('.count_start').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 3000,
    easing: 'swing',
    step: function () {
    $this.text(Math.ceil(this.Counter));
    }
  });
});
...



teraz efekt jest taki ze jak bym nie robił albo sie nie odpala albo wskazuje cały czas 0.

Próbowałem nawet zmienić skrypt odliczjący w funkcję i wywoływać go zamiast zmieniać klasę...ale dalej byłem w slepej uliczce i pojawialo sie 0.

....
   if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position)) {
          $element.addClass('count_start');       
         counting();
        } else {
          $element.removeClass('count_start');
        }

...
});

function counting() {
$('.count_start').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 3000,
    easing: 'swing',
    step: function () {
    $this.text(Math.ceil(this.Counter));
    //$this.text(this.Counter.toFixed(2));
    }
  });
});

}

Moze mi ktoś pomoc?

Wstawiaj kod w znaczniki <code=nazwa_języka></code>.

Widzę, że wiedzę już masz, tylko z jakiegoś powodu kod, który stworzyłeś działa inaczej niż byś chciał. Użyj statementu debugger, żeby znaleźć przyczynę. Pamiętaj też, że masz w chrome dev tools coś takiego jak breakpoint on DOM change

Nie rozumiem dlaczego debuger chrome w przypadku funkcji

vfunction counting() {
$('.count_start').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 3000,
    easing: 'swing',
    step: function () {
    $this.text(Math.ceil(this.Counter));
    //$this.text(this.Counter.toFixed(2));
    }
  });
});

}
 

Zwraca mi informacje:

Uncaught TypeError: $this.value is not a function

Odnośnie sprawdzenia samej w sobie funkcji wstawiłem stałą w miejsce $this.text() 100 i wszytsko działa poprawnie

function counting() {
$('.count_start').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: 100 }, {
    duration: 3000,
    easing: 'swing',
    step: function () {
    $this.text(Math.ceil(this.Counter));
    //$this.text(this.Counter.toFixed(2));
    }
  });
});

}
 

W takim razie mam problem z dobraniem sie do zmiennej <?php echo $num_pilots; ?> generowanej przez php ... zaszytej w HTML w następujący sposob:

                     
 <div class="circle col-md-2 col-md-offset-1">
                                <div class="Statistic_box Staffinview1  delay1s">
                                    <img src="images/icons/Pilot_light.png" class="img-responsive" >
                                    <div class="ST_num">
                                        <div class="count_stop">
                                                <?php echo $num_pilots; ?>                                    
                                        </div>
                                    </div>
                                    <?php echo ST_NUMPILOTS; ?>
                                </div>
                            </div>