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.