首页 文章

挣扎于Jquery延迟

提问于
浏览 次
4

我通过使用jquery操作 "margin-left" 选项来创建轮盘动画 . 我想让它在每次滚动后回到起始位置，所以我试图在每次滚动后重置 "margin-left" .

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

它工作但我必须双击“滚动” - 按钮或它不会移动 .

javascript jquery html delay

1 回答

  • 2

    .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 );
  });
});
    回复于

相关问题