Question

此旋转木马每秒应自动滑动到下一个div元素，并将当前元素附加到caroussel的末尾。这是有效的，但是在很短的时间后，这不再起作用，我不知道为什么。有没有人有建议？

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您必须致电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>

Answer 2

您所依赖的.appendTo()行为会从之前的位置移除并追加到下一个位置。相反，jQuery检测到DOM节点没有改变并优化了删除。

修复变更

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

要

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

旋转木马在短时间内停止滑动

2 个答案: