1

Tenho o seguinte problema, preciso ativar um contador quando o usuário rolar o scroll até a div onde se encontra os números, porém no meu código o contador funciona e depois parece que ativa novamente a função, tentei usar um preventDefault() dentro do complete porém ele me retorna undefined.

Segue abaixo um exemplo do meu código:

function ativaContador(e){
$('.contador').each(function() {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 4000,
                easing: 'swing',
                step: function(now) {
                    $(this).text(Math.ceil(now)+'%');
                },
              complete: function(){
            
              },
            });
            
        });
  }

$(window).scroll(function(e) {
  var alturaBody = $(window).height();
  var distanciaElemento = $('.contador').offset().top;
  var posicaoScroll = $(this).scrollTop();
  var alturaElemento = $('.contador').outerHeight();
  
  if (posicaoScroll > (distanciaElemento+alturaElemento-alturaBody)){
    ativaContador();
   } 
});
.bloco{
  height:2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bloco"></div>
<div class="contador">100</div>

1 Resposta 1

0

Você está usando uma animação, e a mesma se repete. Para parar a repetição é necessário utilizar o método stop() quando a animação estiver completa. O primeiro parâmetro diz para limpar o Queue da animação, o segundo diz para pular para o fim da animação, que é opcional, sendo que a animação já está no fim.

Veja mais: https://api.jquery.com/stop/

function ativaContador(e){
$('.contador').each(function() {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 4000,
                easing: 'swing',
                step: function(now) {
             
                    $(this).text(Math.ceil(now)+'%');
                },
              complete: function(){
            $(this).stop(true,true)
              },
            });
            
        });
  }

$(window).scroll(function(e) {
  var alturaBody = $(window).height();
  var distanciaElemento = $('.contador').offset().top;
  var posicaoScroll = $(this).scrollTop();
  var alturaElemento = $('.contador').outerHeight();
  
  if (posicaoScroll > (distanciaElemento+alturaElemento-alturaBody)){
    ativaContador();
   } 
});
.bloco{
  height:2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bloco"></div>
<div class="contador">100</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .