与 Jquery 延迟作斗争答案

【问题标题】：Struggling with Jquery delay与 Jquery 延迟作斗争
【发布时间】：2016-11-12 12:33:36
【问题描述】：

我通过使用 jquery 操作 "margin-left" 选项创建了轮盘赌动画。我希望它在每次滚动后移回起始位置，所以我尝试在每次滚动后重置 "margin-left" 5 秒。

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

它可以工作，但我必须双击“滚动”按钮，否则它不会移动。

【问题讨论】：

也分享您的 HTML 代码
请分享您的图片以查看问题。

标签： javascript jquery html delay

【解决方案1】：

.dequeue() 方法使排队的函数立即执行，将#roulette 元素移回其原始位置。实际上，代码只有在队列中已经有东西时才能工作。

您所做的不需要复杂的排队，因此可以稍微简化代码，最好使用原生 JavaScript 来处理延迟代码，请参阅the discussion here。

这将给出您正在寻找的行为：

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

【讨论】：