title: How to make this jquery countUP work with formatted numbers?
body: <p>I have a jQuery counter which works great. The only problem is, when I have a number in <code>data-target</code> which is formatted (eg. <code>10,000</code> instead of <code>10000</code>), it doesn't work and shows <code>NaN</code>.  </p>
  
  <p>I don't know what to modify, so it also counts up to <code>10,000,000</code> and not only works with <code>10000000</code>.  </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>$('.counter').each(function() {
    var $this = $(this),
      countTo = $this.attr('data-count');
  
    $({
      countNum: $this.text()
    }).animate({
      countNum: countTo
    }, {
      duration: 8000,
      easing: 'linear',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
        //alert('finished');
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #F46A6A;
    color: #fff;
    max-width: 800px;
    margin: 100px auto 0;
    text-align: center;
    display: table;
  }
  
  .counter {
    display: table-cell;
    margin: 1.5%;
    font-size: 50px;
    background-color: #FF6F6F;
    width: 200px;
    border-radius: 50%;
    height: 200px;
    vertical-align: middle;
  }</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 class="counter" data-count="150"&gt;0&lt;/div&gt;
  &lt;div class="counter" data-count="85"&gt;0&lt;/div&gt;
  &lt;div class="counter" data-count="10,000,000"&gt;0&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>