javascript - jquery 数字计数到目标数字

Question

我有一个网站:my website我已经构建了一个 jQuery 计数器来计算团队中的目标分数。请单击团队选项卡。

问题:

1. 当我加载页面时，jquery 点计数工作正常。让我们说当您转到团队部分并刷新页面时。但是当我滚动到各个部分并到达团队部分时，效果不会显示出来。看起来很正常numbers.Can it be made possible, when the user scrolls to the "team"section the number count with the effect shows up. 当用户滚动到“团队”部分时，会显示具有效果的数字计数。 该部分的代码:

(function($) {
  $.fn.countTo = function(options) {
    options = options || {};

    return $(this).each(function() {
      // set options for current element
      var settings = $.extend({}, $.fn.countTo.defaults, {
        from: $(this).data('from'),
        to: $(this).data('to'),
        speed: $(this).data('speed'),
        refreshInterval: $(this).data('refresh-interval'),
        decimals: $(this).data('decimals')
      }, options);

      // how many times to update the value, and how much to increment the value on each update
      var loops = Math.ceil(settings.speed / settings.refreshInterval),
        increment = (settings.to - settings.from) / loops;

      // references & variables that will change with each update
      var self = this,
        $self = $(this),
        loopCount = 0,
        value = settings.from,
        data = $self.data('countTo') || {};

      $self.data('countTo', data);

      // if an existing interval can be found, clear it first
      if (data.interval) {
        clearInterval(data.interval);
      }
      data.interval = setInterval(updateTimer, settings.refreshInterval);

      // initialize the element with the starting value
      render(value);

      function updateTimer() {
        value += increment;
        loopCount++;

        render(value);

        if (typeof(settings.onUpdate) == 'function') {
          settings.onUpdate.call(self, value);
        }

        if (loopCount >= loops) {
          // remove the interval
          $self.removeData('countTo');
          clearInterval(data.interval);
          value = settings.to;

          if (typeof(settings.onComplete) == 'function') {
            settings.onComplete.call(self, value);
          }
        }
      }

      function render(value) {
        var formattedValue = settings.formatter.call(self, value, settings);
        $self.html(formattedValue);
      }
    });
  };

  $.fn.countTo.defaults = {
    from: 0, // the number the element should start at
    to: 0, // the number the element should end at
    speed: 1000, // how long it should take to count between the target numbers
    refreshInterval: 100, // how often the element should be updated
    decimals: 0, // the number of decimal places to show
    formatter: formatter, // handler for formatting the value before rendering
    onUpdate: null, // callback method for every time the element is updated
    onComplete: null // callback method for when the element finishes updating
  };

  function formatter(value, settings) {
    return value.toFixed(settings.decimals);
  }
}(jQuery));

jQuery(function($) {
  // custom formatting example
  $('#count-number').data('countToOptions', {
    formatter: function(value, options) {
      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    }
  });

  // start all the timers
  $('.timer').each(count);

  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    $this.countTo(options);
  }
});

body {
  font-family: Arial;
  padding: 25px;
  background-color: #f5f5f5;
  color: #808080;
  text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */

/* Column Grids */

/*-=-=-=-=-=-=-=-=-=-=-=- */

.team-leader-box {
  .col_half {
    width: 49%;
  }
  .col_third {
    width: 32%;
  }
  .col_fourth {
    width: 23.5%;
  }
  .col_fifth {
    width: 18.4%;
  }
  .col_sixth {
    width: 15%;
  }
  .col_three_fourth {
    width: 74.5%;
  }
  .col_twothird {
    width: 66%;
  }
  .col_half,
  .col_third,
  .col_twothird,
  .col_fourth,
  .col_three_fourth,
  .col_fifth {
    position: relative;
    display: inline;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
  }
  .end {
    margin-right: 0 !important;
  }
  /* Column Grids End */
  .wrapper {
    width: 980px;
    margin: 30px auto;
    position: relative;
  }
  .counter {
    background-color: #808080;
    padding: 10px 0;
    border-radius: 5px;
  }
  .count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
  }
  .count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
  }
  .fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
  }
}
.counter.col_fourth {
  background-color: #fff;
  border-radius: 10px;
}

<section class="main-section team" id="team">
  <!--main-section team-start-->
  <div class="container">
    <h2>team</h2>
    <h6>Take a closer look into our amazing team. We won’t bite.</h6>
    <div class="team-leader-block clearfix">
      <div class="team-leader-box">
        <div class="team-leader wow fadeInDown delay-03s">
          <div class="team-leader-shadow">
            <a href="#"></a>
          </div>
          <img src="img/team-leader-pic1.jpg" alt="">
          <ul>
            <li>
              <a href="#" class="fa-twitter"></a>
            </li>
            <li>
              <a href="#" class="fa-facebook"></a>
            </li>
            <li>
              <a href="#" class="fa-pinterest"></a>
            </li>
            <li>
              <a href="#" class="fa-google-plus"></a>
            </li>
          </ul>
        </div>



        <div class="wrapper wow fadeInDown delay-05s">
          <div class="counter col_fourth">
            <i class="fa fa-check fa-2x"></i>
            <h2 class="timer count-title" id="count-number" data-to="50" data-speed="1500"></h2>
            <p class="count-text ">points</p>
            <p1>click to know</p1>
          </div>
        </div>

      </div>
      <div class="team-leader-box">
        <div class="team-leader  wow fadeInDown delay-06s">
          <div class="team-leader-shadow">
            <a href="#"></a>
          </div>
          <img src="img/team-leader-pic2.jpg" alt="">
          <ul>
            <li>
              <a href="#" class="fa-twitter"></a>
            </li>
            <li>
              <a href="#" class="fa-facebook"></a>
            </li>
            <li>
              <a href="#" class="fa-pinterest"></a>
            </li>
            <li>
              <a href="#" class="fa-google-plus"></a>
            </li>
          </ul>
        </div>



        <div class="wrapper wow fadeInDown delay-05s">
          <div class="counter col_fourth">
            <i class="fa fa-check fa-2x"></i>
            <h2 class="timer count-title" id="count-number" data-to="30" data-speed="1500"></h2>
            <p class="count-text ">points</p>
          </div>
        </div>
      </div>
      <div class="team-leader-box">
        <div class="team-leader wow fadeInDown delay-09s">
          <div class="team-leader-shadow">
            <a href="#"></a>
          </div>
          <img src="img/team-leader-pic3.jpg" alt="">
          <ul>
            <li>
              <a href="#" class="fa-twitter"></a>
            </li>
            <li>
              <a href="#" class="fa-facebook"></a>
            </li>
            <li>
              <a href="#" class="fa-pinterest"></a>
            </li>
            <li>
              <a href="#" class="fa-google-plus"></a>
            </li>
          </ul>
        </div>

        <div class="wrapper wow fadeInDown delay-05s">
          <div class="counter col_fourth">
            <i class="fa fa-check fa-2x"></i>
            <h2 class="timer count-title" id="count-number" data-to="10" data-speed="1500"></h2>
            <p class="count-text ">points</p>
          </div>
        </div>



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

  <div class="popup" id="popup">
    <div class="popup__inner">
      <header class="popup__header">
        <a onclick="$('#popup').fadeOut()" id="popup-exit">esc</a>
      </header>
      <img src="http://www.fillmurray.com/124/124" alt="Bart Veneman" width="200" height="200" class="profile__image" />
      <!--

		-->
      <section class="profile__details">
        <ul class="profile__stats">
          <li>
            <h3 class="profile_stat__heading">Gold</h3>
            <div class="profile_stat__number">17</div>
          </li>
          <!--
		-->
          <li>
            <h3 class="profile_stat__heading">Silver</h3>
            <div class="profile_stat__number">8</div>
          </li>
          <!--
		-->
          <li>
            <h3 class="profile_stat__heading">Bronze</h3>
            <div class="profile_stat__number">21</div>
          </li>
        </ul>

        <h2 class="profile__name" id="popup-name"></h2>
        <h2 class="profile__name">Designation: </h2>
        <h2 class="profile__name">Reporting Manager: </h2>
        <h2 class="profile__name">Email: </h2>
        <h2 class="profile__name">Date of Join: </h2>
        <h2 class="profile__name" id="popup-score"></h2>
        <h2 class="profile__name">Latest Week Points: </h2>
        <h2 class="profile__name">Overall Points: </h2>
        <h2 class="profile__name">Medals Rewarded:</h2>




        <ul class="social">
          <li><a href="#"><i class="fa fa-github"></i></a>
          </li>
          <!--
		-->
          <li><a href="#"><i class="fa fa-instagram"></i></a>
          </li>
          <!--
		-->
          <li><a href="#"><i class="fa fa-twitter"></i></a>
          </li>
          <!--
		-->
          <li><a href="#"><i class="fa fa-bitbucket"></i></a>
          </li>
          <!--
		-->
          <li class="location"><i class="fa fa-map-marker"></i><span>Bangalore, IN</span>
          </li>
        </ul>
      </section>

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

这个问题我以前问过，我知道。 jquery number count to a target number and pop display on click .根据要求，我已将问题分开。

请帮忙。

Answer 1

使用 jquery.appear插入。它实现自定义出现/消失事件，当元素在浏览器视口(viewport)中变得可见/不可见时会触发这些事件。

下面的代码将使用插件给你一个简单的动画效果。您需要确保每个 .timer 元素都具有唯一的 id 属性才能正常工作。

// singleRun : boolean to ensure we only animate once
var singleRun = true;
// executes when .counter container becomes visible
$(".counter").on("appear", function(data) {
  // initialise the counters
  var counters = {};
  var i = 0;
  if (singleRun){
    // track each of the counters
    $(".timer").each(function(){
      counters[this.id] = $(this).data("to");
      i++;
    });
    // animate the counters
    $.each(counters, function(key, val) {
      $({countVal: 0}).animate({countVal: val}, {
        duration: 1500,
        easing:"linear",
        step: function() {
          // update the display
          $("#" + key).text(Math.floor(this.countVal));
        }
      });
    });
    singleRun = false;
  }
});

<div class="wrapper wow fadeInDown delay-05s">
  <div class="counter col_fourth">
    <i class="fa fa-check fa-2x"></i>
    <!-- Remember a timer requires a unique id value -->
    <h2 class="timer count-title" id="UNIQUE-ID-HERE" data-to="10"></h2>
    <p class="count-text ">points</p>
  </div>
</div>