Number Count開始点

Question

number countのスクリプトを作成しますが、問題が発生したときにページ番号のカウントを開始するときに問題が発生します。

のCss： -

.office{padding-right: 5px; padding-left: 5px;} 
.office div{margin-bottom:5px;} 
.office i {margin-right:0px;} 
.office i img{width: 35px; height: 35px;} 
.office div span{ font-size: 36px; position: relative; top: 10px;} 
.office p{ font-size: 13px; margin:0; padding:0;} 

のJs： -

$(document).ready(function() { 
$('.count').each(function() { 
    $(this).prop('Counter',0).animate({ 
     Counter: $(this).text() 
    }, { 
     duration: 4000, 
     easing: 'swing', 
     step: function (now) { 
      $(this).text(Math.ceil(now)); 
     } 
    }); 
}); 
}); 

HTML： -

<div class="row"> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    <div class="col-md-12 m-b-xm"> 
    <div class="col-xs-4 office"> 
     <div> 
     <i><img src="images/office-ico.jpg" alt=""></i> 
    <span class="count">10</span> 
    </div> 
    <p>Offices Worldwide</p> 
</div> 
<div class="col-xs-4 office"> 
    <div> 
    <i><img src="images/hard-ico.jpg" alt=""></i> 
    <span class="count" data-speed="1000">180</span> 
    </div> 
    <p>Hardworking People</p> 
</div> 
<div class="col-xs-4 office"> 
    <div> 
    <i><img src="images/coun-ico.jpg" alt=""></i> 
    <span class="count">06</span> 
    </div> 
    <p>Countries Covered</p> 
</div> 
<div class="clearfix"></div> 
    </div> 
</div> 

は完全な作業コードへのリンクを確認してください： - Jsfiddle

Answer 1

...これはあなたの問題を解決するためだと思います。私たちは、カウントを追跡し、それをインクリメントすることができ、この

<span class="count" data-count="10">10</span> 

のようなデータ属性を使用して、このfiddle

をご確認ください。

Answer 2

<div class="row"> 

    <div id="startcount"class="col-md-12 m-b-xm"> 
    <div class="col-xs-4 office"> 
     <div> 
     <i><img src="images/office-ico.jpg" alt=""></i> 
     <span class="count">10</span> 
     </div> 
     <p>Offices Worldwide</p> 
    </div> 
    <div class="col-xs-4 office"> 
     <div> 
     <i><img src="images/hard-ico.jpg" alt=""></i> 
     <span class="count" data-speed="1000">180</span> 
     </div> 
     <p>Hardworking People</p> 
    </div> 
    <div class="col-xs-4 office"> 
     <div> 
     <i><img src="images/coun-ico.jpg" alt=""></i> 
     <span class="count">06</span> 
     </div> 
     <p>Countries Covered</p> 
    </div> 
    <div class="clearfix"></div> 
    </div> 
</div> 

JAVASCRIPT： -

$(document).ready(function() { 
document.getElementById("startcount").onmouseover = function() { 
$('.count').each(function() { 
     $(this).prop('Counter',0).animate({ 
      Counter: $(this).text() 
     }, { 
      duration: 4000, 
      easing: 'swing', 
      step: function (now) { 
       $(this).text(Math.ceil(now)); 
      } 
     }); 
    }); // code to run when the user hovers over the div 
}; 
}); 

私は、私はあなたが少しのコードを変更した