Counting numbers up with animation
<p>I want to count up a number with a animation. I have a HTML code where I set the number and a function which is counting this numbers. The problem is that I have a number <code>95%</code> with a percent character after it. But the function removes this character. Do you have any ideas why?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var fired = 0;
$(document).ready(function () {
 if(fired === 0) {
  $('.count').each(function () {
   $(this).prop('Counter',0).animate({
    Counter: $(this).text()
       }, {
       duration: 3000,
       easing: 'swing',
       step: function (now) {
       $(this).text(Math.ceil(now));
       }
   });
  });
  fired = 1; //Only do scroll function once
 }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.count {
    font-size: 50px;
    margin-bottom: 10px;
    font-weight: 900;
    text-transform: uppercase;
    display: block;
    padding-top: 15px;
}
#counter {
    float: left;
    display: block;
    width: 28.71111111%;
    text-align: center;
    padding: 0 30px;
}
#counter h3 {
    font-size: 1.2em;
    font-weight: 100;
    text-transform: uppercase;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="counter"&gt;
 &lt;h3&gt;
  &lt;span class="count customer-satisfaction"&gt;95%&lt;/span&gt;
  Customer Satisfaction
 &lt;/h3&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>