Kai Baumann Kai Baumann - 22 days ago 8
HTML Question

Struggling with Jquery delay

I created a roulette animation by manipulating the "margin-left" option with jquery. I want it to move back to the start position after every roll, so i tried to reset "margin-left" 5 seconds after every roll.

$(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's working but i have to double click the "roll"-Button or it won't move.

Answer

The .dequeue() method is making the queued function execute immediately, moving the #roulette element back to its original place.

The code, as it is, will only worked when there is already something in the queue.

I think this will give the behavior you are looking for:

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