Question

我通过使用jquery操纵＆＃34; margin-left＆＃34; 选项来创建轮盘动画。我想让它在每次滚动后回到起始位置，所以我试图在每次滚动后5秒重置＆＃34; margin-left＆＃34; 。

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

它正在工作，但我必须双击＆＃34; roll＆＃34; -Button或它不会移动。

Answer 1

.dequeue（）方法使排队函数立即执行，将#roulette元素移回原来的位置。代码实际上只有在队列中已存在某些东西时才会起作用。

您正在做的事情不需要复杂的排队，因此代码可以简化一些，最好通过使用vanilla JavaScript来处理延迟代码，请参阅the discussion here。

这将提供您正在寻找的行为：

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

挣扎于Jquery延迟

1 个答案: