自动计数启动

Question

如何将计数设置为不自动运行？我想把它算起来，只要我在上面滚动就可以了。

html代码:

<!-- COUNT UP -->
    <div id="countup" class="countup parallax-window" data-parallax="scroll" data-image-src="img/basic/background-count.jpg"><!-- start countup div-->
        <div class="container">
            <div class="row">

                <h2>The <b>Count</b></h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                <br>Lorem Ipsum has been the industry's standard</p>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    <h3 class="counter" data-count="350">0</h3>
                    <h4>Project</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-coffee" aria-hidden="true"></i>
                    <h3 class="counter" data-count="755">0</h3>
                    <h4>Coffee</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                    <h3 class="counter" data-count="2500">0</h3>
                    <h4>Smile</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-users"></i>
                    <h3 class="counter" data-count="50">0</h3>
                    <h4>Employee</h4>
                </div>

            </div>
        </div>
    </div>
    <!-- END COUNT UP -->

Javascript代码:`

 $('.counter').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');

  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {

    duration: 5000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }
  });  
});

和这个ss :

​

Answer 1

​

$('.counter').hover(
function(){
var $this = $(this),
      countTo = $this.attr('data-count');

  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {

    duration: 5000,
    easing:'linear',
    step: function() {
      $this.text(Math.ceil(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }
  });  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="countup" class="countup parallax-window" data-parallax="scroll" data-image-src="img/basic/background-count.jpg"><!-- start countup div-->
        <div class="container">
            <div class="row">

                <h2>The <b>Count</b></h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                <br>Lorem Ipsum has been the industry's standard</p>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    <h3 class="counter" data-count="350">0</h3>
                    <h4>Project</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-coffee" aria-hidden="true"></i>
                    <h3 class="counter" data-count="755">0</h3>
                    <h4>Coffee</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                    <h3 class="counter" data-count="2500">0</h3>
                    <h4>Smile</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-users"></i>
                    <h3 class="counter" data-count="50">0</h3>
                    <h4>Employee</h4>
                </div>

            </div>
        </div>
    </div>

​

尝尝这个