Как остановить анимацию на моем счетчике при прокрутке, когда счетчик готов? - PullRequest
Новая
       36

Как остановить анимацию на моем счетчике при прокрутке, когда счетчик готов?

0 голосов
/ 13 декабря 2018

Сначала я создал счетчик, который отлично работает.Обычно при прокрутке до определенной точки счетчик начинает анимироваться.Однако не было запятой для чисел, больших или равных 1000. Поэтому после того, как я попытался поставить «запятую» в целых числах, равных и превышающих 1000, именно тогда начались проблемы.После завершения начального счетчика, когда вы прокручиваете вниз или вверх, счетчик начинает анимацию снова, хотя анимация завершена.Я пытался все, чтобы попытаться исправить это, включая использование ".stop ()" и ".finish ()", и он не работает.

Есть предложения?

jQuery(document).ready(function($) { 
"use strict";
	$(document).scroll(function() {
			var y = $(this).scrollTop();
			$.fn.digits = function(){ 
					return this.each(function(){ 
						$(this).text( $(this).text().replace(/\B(?=(\d{3})+(?!\d))/g, ",") ); 
					});
				};
			var countTo1 = $('#counter1').attr('data-count');
			var countTo2 = $('#counter2').attr('data-count');
			var countTo3 = $('#counter3').attr('data-count');
			if (y > 30) {
				
				$({countNum: $('#counter1').text()}).animate({countNum: countTo1}, {
					duration: 1000,
					easing:'linear',
					decimals: 0,
					step: function() {
						$('#counter1').text(Math.floor(this.countNum)).digits();
					},
						complete: function() {
							$('#counter1').text(this.countNum);
              $('#counter1').digits();
						}
					});
				

				$({countNum: $('#counter2').text()}).animate({countNum: countTo2}, {
					duration: 1000,
					easing:'linear',
					step: function() {
						$('#counter2').text(Math.floor(this.countNum));
					},
						complete: function() {
							$('#counter2').text(this.countNum);
						}
				});

				$({countNum: $('#counter3').text()}).animate({countNum: countTo3}, {
					duration: 1000,
					easing:'linear',
					step: function() {
						$('#counter3').text(Math.floor(this.countNum));
					},
						complete: function() {
							$('#counter3').text(this.countNum);
						}
				});
			}
		});

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<div class="content-module three-column    module stat-number-block">
		<div class="row">
			<div class="small-12 columns">
							</div>
			<div class="small-12 medium-4 columns content ">
				<h3 style="" class="subhead"><span id="counter1" data-count="1400">0</span> +</h3>				<p style="text-align: center;"><strong>Successful weight loss surgeries</strong></p>
							</div>

			<div class="small-12 medium-4 columns content ">
				<h3 style="" class="subhead"><span id="counter2" data-count="100"> 0 </span>k +</h3>				<p style="text-align: center;"><strong>Pounds shed across all patients</strong></p>
							</div>

			<div class="small-12 medium-4 columns content ">
				<h3 style="" class="subhead"><span id="counter3" data-count="98"> 0 </span>% </h3>				<p style="text-align: center;"><strong>Of patients see resolution of sleep apnea, diabetes, and more</strong></p>
							</div>
		</div>
	</div>
...