Increasing/decreasing number effect

Question

I searched the Sopt and I couldn’t find what I wanted Suppose I have one button and, when carrying out a click, he alter the value of some div or input. The initial value is 1, and to the click on, change to 10.

I wish that transition were it not for direct. I wish the numbers were growing up, of 1 at the 10 (Ex: 1,2,3,4,5,6,7,8,9 e, finalmente 10). I thought I’d do with setTnterval and a loop, but I couldn’t think of the solution itself.

I have a preference for jQuery.

I will leave an excerpt to help. Thanks for your attention.

$("#alterarValor").click(function(){
$("#numero").text("10");
});
$("#voltarValor").click(function(){
$("#numero").text("1");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="numero">1</div>
<input type="button" id="alterarValor" value="Alterar valor" />
<input type="button" id="voltarValor" value="Resetar" />

Answer 1

You have to create a loop with setTimeout that keeps changing. With a loop you start the setTimout all at the same time but using the i to multiply the waiting time the effect is what you seek.

Example with 5 seconds of transition:

$("#alterarValor").click(function() {
  var numero = document.getElementById('numero');
  var min = 1;
  var max = 20;
  var duração = 5000; // 5 segundos

  for (var i = min; i <= max; i++) {
    setTimeout(function(nr) {
      numero.innerHTML = nr;
    }, i * 5000 / max, i);
  }
});

$("#voltarValor").click(function() {
  $("#numero").text("1");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="numero">1</div>
<input type="button" id="alterarValor" value="Alterar valor" />
<input type="button" id="voltarValor" value="Resetar" />

Answer 2

I know the question has already been answered, but anyway follows example of another way to do this with the numbers in ascending and decreasing order to increase the knowledge base:

jQuery(function($){
  $("#alterarValorCrescente").click(function(){
    //Valor inicial
    var count = 1;
    countdown = setInterval(function(){
      $('#contagem').html(count);
      //Valor final
      if (count >= 10){
        //Ao chegar no valor final (10) interrompe a contagem
        clearInterval(countdown);
      }
      count++;
      //Transição a cada meio segundo
    }, 500);
  });
  $("#alterarValorDecrescente").click(function(){
    //Valor inicial
    var count = 10;
    countdown = setInterval(function(){
      $('#contagem').html(count);
      //Valor final
      if (count == 1){
        //Ao chegar no valor final (1) interrompe a contagem
        clearInterval(countdown);
      }
      count--;
      //Transição a cada meio segundo
    }, 500);
  });
  $("#voltarValor").click(function(){
    $("#contagem").text("1");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contagem">1</div>
<button id="alterarValorCrescente">Alterar valor +</button>
<button id="alterarValorDecrescente">Alterar valor -</button>
<button id="voltarValor">Resetar</button>