Fighting JQuery Delay

Question

I created a roulette animation by manipulating the "margin-left" option with jquery. I want it to return to its starting position after each throw, so I tried resetting "margin-left" 5 seconds after each throw.

$(document).ready(function() {
  $("#roll").click(function() {
    $("#roulette").css("margin-left","-3000px").delay(5000);
    $("#roulette").queue(function() {
        $('#roulette').css("margin-left","0px");
      }).dequeue();
  });
});

HTML:

<div class="row roulette-outer">
    <div class="row roulette" id="roulette">
      <div class="skins"><img class="img-thumbnail" src="images/1.png"></img></div>
      <div class="skins"><img class="img-thumbnail" src="images/2.png"></img></div>
      ...
    </div>
</div>
<button class="btn btn-danger center-block" type="button" id="roll">Klick</button>

It works, but I need to double-click the "roll" button or not move.

Answer 1

The .dequeue () method immediately executes a queue function by moving the #roulette element back to its original location. The code, as it is, will work only when there is already something in the queue.

, , , , JavaScript , . .

, :

  $(document).ready(function() {
  $("#roll").click(function() {
    $("#roulette").css("margin-left","-3000px");
    window.setTimeout( function() { $("#roulette").css("margin-left","0") }, 5000 );
  });
});