jquery numberはターゲット番号に数えます

私はウェブサイトを持っています：my websiteチームのタブをクリックすると、ポイントのターゲット番号までカウントするためのjQueryカウンターが構築されています。jquery numberはターゲット番号に数えます

問題：私はページをロードする際

1. は、jqueryのポイント数は、あなたがセクションをチームと私は、様々なセクションをにスクロールするときpage.Butをリフレッシュして到達するために行くときfine.Letsが言う作品チームセクションでは、エフェクトが表示されません。通常の数字のようです。ユーザーが「チーム」セクションにスクロールすると、エフェクトの数カウントが表示されます。その部分のコード：

(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" /> 
 
     <!-- 
 

 
\t \t --> 
 
     <section class="profile__details"> 
 
     <ul class="profile__stats"> 
 
      <li> 
 
      <h3 class="profile_stat__heading">Gold</h3> 
 
      <div class="profile_stat__number">17</div> 
 
      </li> 
 
      <!-- 
 
\t \t --> 
 
      <li> 
 
      <h3 class="profile_stat__heading">Silver</h3> 
 
      <div class="profile_stat__number">8</div> 
 
      </li> 
 
      <!-- 
 
\t \t --> 
 
      <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> 
 
      <!-- 
 
\t \t --> 
 
      <li><a href="#"><i class="fa fa-instagram"></i></a> 
 
      </li> 
 
      <!-- 
 
\t \t --> 
 
      <li><a href="#"><i class="fa fa-twitter"></i></a> 
 
      </li> 
 
      <!-- 
 
\t \t --> 
 
      <li><a href="#"><i class="fa fa-bitbucket"></i></a> 
 
      </li> 
 
      <!-- 
 
\t \t --> 
 
      <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。要望どおり、私はその質問を分けた。

親切にお手伝いください。

出典

2016-11-13 Anonymous

は、入力のために、この – charlietfl

@charlietflおかげに関連するさまざまなプラグインを見つけることが難しいことではありません。 Plugin.codesがうまく動かないようにする必要はありません。ユーザーがスクロールしてWebサイトの「チーム」の部分に到達すると、番号が目標番号に移動します。 –

あなたのページのコードは、＃550の行に孤立した '

jquery numberはターゲット番号に数えます

関連する問題