How do I "update" a Function?

Question

How do I "update" a Function?

Asked 7 years, 10 months ago

Viewed 327 times

0

Well, I have the following code:

<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>

When I enter the page and click on Rotate! , works the way I want, but then if I don’t give F5 on the same page and click on rotate, no longer has the same effect or instead of "turn from left to right" right to left wheel. How can I make so that at the end of the "Run" effect, update the function so that it does not have to give F5?

Thank you.

1 answer

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by mrlew • **1,472** points · Answer 1 · 2017-01-29T16:10:47+00:00

What’s happening is that in the second round, it can pick a random number for the bottom position minor that the previous one, and then the animation goes to the right.

One suggestion is to reset the background position before animating it. You can use the method .css jQuery to set this attribute to 0%.

Something like that:

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 with my suggestion: https://jsfiddle.net/mrlew/aprmrze1/

Edition: complement

If you click rotate while the animation is going on, the same problem will happen. So I took the liberty of adding to your code a control: whether the data-animating is "true", it returns the function and does not execute another animation. At the end of the animation, it removes this attribute (I added callback at the end of the method .animate). It’s just a suggestion:

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 here with this update: https://jsfiddle.net/mrlew/aprmrze1/6/

Another approach would simply disable the button while the animation is ongoing.