转盘在短时间内停止滑动

Question

此轮播每秒应自动滑到下一个div 元素，并将当前元素附加到轮播的末尾。这有效，但是在很短的时间之后，这不再有效，我不知道为什么。有人有建议吗？

setInterval(function() {
  $(".element")
    .eq(0)
    .css({
      "margin-left": "-245px"
    })
    .delay(3000)
    .queue(function(next) {
      $(this).appendTo(".wrapper").css({
        "margin-left": "10px"
      });
    });
}, 1000);

.mgcont {
  margin: 5% auto;
  width: 970px;
  overflow: hidden;
  border: 2px solid gray;
}

.wrapper {
  white-space: nowrap;
  width: 960px;
}

.element {
  width: 240px;
  height: 300px;
  background: tomato;
  display: inline-block;
  margin-left: 10px;
  transition: margin-left 3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mgcont">
  <div class="wrapper">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
    <div class="element">6</div>
  </div>
</div>

Answer 1

发生的情况是您依赖 .appendTo() 行为从先前位置删除并附加到下一个位置。相反，jQuery 检测到 DOM 节点没有改变并优化移除。

修复变化

$(this).appendTo(".wrapper")

到

$(this).remove().appendTo(".wrapper")

Answer 2

您必须致电next。见https://api.jquery.com/queue/#queue-queueName-callback。

请注意，当使用.queue() 添加函数时，我们应确保最终调用.dequeue()，以便执行行中的下一个函数。

从 jQuery 1.4 开始，被调用的函数作为第一个参数传递给另一个函数。调用时，它会自动将下一个项目出列并保持队列移动。

.queue(function(next) {
  $(this).appendTo(".wrapper").css({
    "margin-left": "10px"
  });
  next();
});

话虽如此，我发现了另外两个问题。

第一个问题与 HTML 代码有关。我注意到您将元素向左移动了 255 (10 + 245) 像素而不是 250 (10 + 240)。我猜你正试图在每个动画结束时摆脱这个小故障。好消息，有一种干净的方法可以完全删除它。它来自与插入元素之间的空白相关的不可见文本节点。去掉源代码中的空格，文本节点就会消失：

<div class="wrapper"
  ><div class="element">1</div
  ><div class="element">2</div
  ><div class="element">3</div
  ><div class="element">4</div
  ><div class="element">5</div
  ><div class="element">6</div
></div>

第二个问题与JS代码有关。一个元素需要 3 秒才能到达其最终位置，但您每秒都重复这些指令。因此，对于每个元素，最后一个函数至少排队 3 次，并且队列可能会越来越多，如果不崩溃的话，它会减慢您的 Web 浏览器的速度。为避免这种悲剧，您应该在当前动画完成后触发下一个动画。可以这样做：

setTimeout(slide, 1000);

function slide () {
  $(".element")
    .eq(0)
    ...
    .queue(function(next) {
      ...
      setTimeout(slide, 1000);
    });
}

解决了这两个问题后，生成的程序会好很多，但我有最后一条评论。在 JS 中等待 3 秒让 CSS 过渡完成很奇怪，这不是很准确。我认为最好不要混合 CSS 过渡和 JS 动画，而是完全在 JS 中完成。

就是这样 :-) 作为总结，请看下面的演示。

setTimeout(slide, 1000);

function slide () {
  $(".element")
    .eq(0)
    .css("margin-left", "-40px")
    .delay(3000)
    .queue(function(next) {
      $(this).appendTo(".wrapper").css({
        "margin-left": "10px"
      });
      next();
      setTimeout(slide, 1000);
    });
}

.mgcont {
  overflow: hidden;
  border: 1px solid gray;
}

.element {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  background: tomato;
  display: inline-block;
  transition: margin-left 3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mgcont">
  <div class="wrapper"
    ><div class="element">1</div
    ><div class="element">2</div
    ><div class="element">3</div
    ><div class="element">4</div
    ><div class="element">5</div
    ><div class="element">6</div
  ></div>
</div>