javascript - 传送带在短时间后停止滑动

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

您必须调用next。请参阅https://api.jquery.com/queue/#queue-queueName-callback .

Note that when adding a function with .queue(), we should ensure that .dequeue() is eventually called so that the next function in line executes.

As of jQuery 1.4, the function that's called is passed another function as the first argument. When called, this automatically dequeues the next item and keeps the queue moving.

.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 浏览器崩溃，也会减慢 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>