0

Bom, tenho o seguinte código:

<head>
<style>
body,html,div {
  margin:0;
  padding:0;
  width:1050px;
  height:69px;
  position:relative;
}

#anim {
  background:url('https://csgopolygon.com/img/cases.png?v=222') 0 0;
  background-size:300% 100%;
}
#ponteiro{
background-color:yellow;
height:69px;
width:5px;

}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
</head>



<div id="anim">
<center>
<div id="ponteiro">
</div>
</center>


</div>

<button onclick="goncalo()">Rodar!</button>

<script type="text/javascript"> 
function goncalo(){

var ola = Math.floor(Math.random() * 500) + 150  +'%';
$('#anim').animate({'background-position-x': ola},8000,'easeOutCubic');

}
</script>

Quando eu entro na página e clico em Rodar!, funciona da forma que eu desejo, mas depois se não dou f5 na mesma página e clico em rodar, já não tem o mesmo efeito ou em vez de "rodar da esquerda para a direita" roda da direita para a esquerda. Como poderei fazer para que no final do efeito do "Rodar", atualize a função de forma a que não tenha que dar f5?

Obrigado.

1 Resposta 1

3

O que está acontecendo é que, na segunda rodada, ele pode pegar um número aleatório para a posição do fundo menor que o anterior, e então a animação vai para a direita.

Uma sugestão é reiniciar a posição do fundo antes de animá-lo. Você pode usar o método .css do jQuery para setar este atributo para 0%.

Algo assim:

function goncalo() {

  var ola = Math.floor(Math.random() * 500) + 150 + '%';
  $('#anim').css('background-position-x', "0%");
  $('#anim').animate({
    'background-position-x': ola
  }, 8000, 'easeOutCubic');

}

Fiddle com minha sugestão: https://jsfiddle.net/mrlew/aprmrze1/

Edição: complemento

Se você clicar em rodar enquanto a animação estiver em curso, vai acontecer o mesmo problema. Então tomei a liberdade de adicionar ao seu código um controle: se o data-animating estiver como "true", ele retorna da função e não executa outra animação. Ao final da animação, ele remove este atributo (adicionei o callback ao final do método .animate). É apenas uma sugestão:

function goncalo() {

  var obj = $('#anim');

  var isAnimating = obj.attr('data-animating');
  if (isAnimating === "true") return;

  var ola = Math.floor(Math.random() * 500) + 150 + '%';    

  obj.css('background-position-x', "0%");
  obj.attr('data-animating', 'true')
  obj.animate({
    'background-position-x': ola
  }, 8000, 'easeOutCubic', function() {
    obj.removeAttr('data-animating')
  });

}

Fiddle aqui com esta atualização: https://jsfiddle.net/mrlew/aprmrze1/6/

Outra abordagem seria simplesmente desabilitar o botão enquanto a animação está em curso.

3
  • É isto mesmo que eu precisava! Dentro de 4 minutos, marco a resposta.
    – Gonçalo
    Commented 29/01/2017 às 16:14
  • @Gonçalo editei com um complemento, espero que ajude.
    – luiscrjr
    Commented 29/01/2017 às 16:40
  • Perfeito!, Não podia pedir melhor.
    – Gonçalo
    Commented 29/01/2017 às 16:45

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 .