Как реализовать счётчик, на сайте?

Question

[seregindev]

Доброго времени суток! Не могу никак разобраться с проблемой. На сайте реализовал счётчик, который срабатывает при скроле, когда элемент попадает в поле видимости, скрипт срабатывает.
Он обнуляет значение элементов, а потом возвращает их в своё изначальное состояние.
Суть проблемы, у меня имеется элемент, который имеет на конце знак "%".
И когда срабатывает скрипт, элемент принимает значение NaN.
Нужно что-бы когда срабатывал счётчик, оставался элемент "%"
Буду очень благодарен за помощь!
Код скрипта:

$("#layers-widget-column-10 h5").each( function() { 
$(this).prop('Counter', 0).animate({ 
Counter: $(this).text() 
}, { 
duration: 1500, 
easing: 'swing', 
step: function(now) { 
$(this).text(Math.ceil(now)); 
} 
}) 
})

HTML код

<div id="layers-widget-column-10" class="widget layers-content-widget content-vertical-massive  " >
   <div class="container list-grid">
      <div class="grid">
        <div id="layers-widget-column-10-575" class="layers-masonry-column layers-widget-      column-575 span-2  first  column ">
          <div class="media image-top medium"><div class="media-body text-left">												
            <h5 class="heading">
                100%
            </h5>	
            <div class="excerpt">
                <p>Talented professionals who get the job done</p>
            </div>		
        </div>
    </div>
</div>

Answer 1

[Илья]

https://jsfiddle.net/3wdqesb6/

$("#layers-widget-column-10 h5").each( function() { 
  var counter = $.trim($(this).text()); //Удаляем крайнее пробелы
  var percentage = counter.substring(counter.length-1) == '%'; //Последний символ %?
  console.log(percentage,counter.substring(counter.length-1));
  $(this).prop('Counter', 0).animate({ 
      Counter: (percentage?counter.substring(0, counter.length-1):counter) //Если проценты, возращаем строку без последнего символа
    }, { 
      duration: 1500, 
      easing: 'swing', 
      step: function(now) { 
        $(this).text(Math.ceil(now)+(percentage?'%':'')); //Если процент, добавляем знак процента
      } 
    }
  );
});

Update: добавил $.trim проблема была в пробелах

Comments

[seregindev]

К сожалению данный код не сработал, всё равно выходит NaN. При попытке парсировать в целочисленные значения. Знак % не отображается.

[Илья]

seregindev: Дайте html, посмотрим

[seregindev]

Илья:

<div id="layers-widget-column-10" class="widget layers-content-widget content-vertical-massive  " >
   <div class="container list-grid">
      <div class="grid">
        <div id="layers-widget-column-10-575" class="layers-masonry-column layers-widget-      column-575 span-2  first  column ">
          <div class="media image-top medium"><div class="media-body text-left">												
            <h5 class="heading">
                100%
            </h5>	
            <div class="excerpt">
                <p>Talented professionals who get the job done</p>
            </div>		
        </div>
    </div>
</div>

[Илья]

seregindev: Обновил ответ

[seregindev]

Илья: Спасибо огромное, всё заработало!

Answer 2

[Григорий]

а нельзя знак % вынести отдельно? что б изменялось значение от 0 до 100, а знак % был всегда на месте?

Comments

[seregindev]

Я пытался реализовать данный способ, я добавлял через псевдокласс ::aftrt. Появлялось большое расстояние между цифрами и %. Когда срабатывал скрип, расстояние становилось нормальным. Я пытался пододвинуть изначальное состояние ближе к цифрам, но когда срабатывал скрипт, проценты накладывались на цифры.