Effect number increasing / decreasing

Question

Effect number increasing / decreasing

Navigation

#1 by (7 votes)
#2 by (3 votes)

7

I searched SOpt and did not find what I wanted Let's say I have a button and when you click it change the value of some div > or input . The starting value is 1 , and click , change to 10 .

I would like this transition not to be direct . I would like the numbers to be growing , from 1 to 10 Ex: 1,2,3 , 4,5,6,7,8,9 and finally 10 ). I thought about doing with setTnterval and a loop , but I could not think of the solution itself.

I have preference for jQuery.

I'll leave a little bit to help. Thanks in advance 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><divid="numero">1</div>
<input type="button" id="alterarValor" value="Alterar valor" />
<input type="button" id="voltarValor" value="Resetar" />

javascript html jquery css

asked by anonymous 20.08.2017 / 21:07

2 answers

3

I know the question has already been answered but, anyway, follow another example of doing this with the numbers in ascending and descending 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><divid="contagem">1</div>
<button id="alterarValorCrescente">Alterar valor +</button>
<button id="alterarValorDecrescente">Alterar valor -</button>
<button id="voltarValor">Resetar</button>

22.08.2017 / 20:22

What are the differences between Flask and Django? Pages in ASP.NET still running after page change?

score 7 · Accepted Answer

You have to create a loop with setTimeout that is changing. With a loop you start the setTimout all at the same time but using i to multiply the wait time the effect is what you are looking for.

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><divid="numero">1</div>
<input type="button" id="alterarValor" value="Alterar valor" />
<input type="button" id="voltarValor" value="Resetar" />