6

Procurei no SOpt e não encontrei o que desejava Suponhamos que eu tenha um botão e, ao efetuar um clique, ele altere o valor de alguma div ou input. O valor inicial seja 1, e ao clicar, mude para 10.

Gostaria que essa transição não fosse direta. Gostaria que os números fossem crescendo, do 1 ao 10 (Ex: 1,2,3,4,5,6,7,8,9 e, finalmente 10). Pensei em fazer com setTnterval e um loop, mas não consegui pensar na solução em si.

Tenho preferência por jQuery.

Deixarei um trecho para ajudar. Desde já, obrigado pela atenção.

$("#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" />

2 Respostas 2

6

Tens de criar um loop com setTimeout que vai mudando. Com um loop começas os setTimout todos ao mesmo tempo mas usando o i para multiplicar o tempo de espera o efeito é o que procuras.

Exemplo com 5 segundos de transição:

$("#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" />

1
  • 1
    Perfeito. Exatamente o que eu desejava. Obrigado! 20/08/2017 às 19:24
2

Sei que a pergunta já foi respondida, mas, de qualquer forma, segue exemplo de outra maneira de fazer isso com os números em ordem crescente e decrescente para aumentar a base de conhecimento:

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>

3
  • 1
    Opa! Muito obrigado amigo! Estarei analisando! 22/08/2017 às 18:46
  • 1
    Desculpe só responder agora. Mas eu testei seu script e achei ele ainda mais interessante que o outro. Muito obrigado! 27/08/2017 às 14:04
  • @Leandro como fazer para que isso ocorra no load da pagina, sem precisar clicar no botão "alterar valor"? 25/03/2021 às 23:49

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 .