javascript - 简单的 JQuery 滑动效果不同步

Question

我有这个简单的 JQuery 代码，可以将内容从一个 div 滑动到下一个。然而，在浏览器打开一段时间后，最终，它会失去同步，所有这些都开始同时飞过屏幕，并最终彼此重叠。知道我的代码有什么问题吗？

$(function() {
  function sp18() {
    div = $('#container .box.selected');

    $(div).animate({
      left: '-50%'
    }, 500, function() {
      $(div).css('left', '150%').removeClass("selected");
      $(div).appendTo('#container');
    });

    $(div).next().animate({
      left: '0'
    }, 500).addClass("selected");

    setTimeout(sp18, 200);
  }

  setTimeout(sp18, 100);
});

#container {
  letter-spacing: 0.05em;
  text-align: center;
  width: 100%;
  margin-top: 2px;
  width: 100%;
  height: 38px;
  overflow: hidden;
  line-height: 38px;
  position: relative;
}

#container .box {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 150%;
  margin-left: 0;
  line-height: 38px;
  font-size: 13px;
}

#container .box span {
  color: #555
}

#container .box.selected {
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="box selected">slide 1</div>
  <div class="box">slide 2</div>
  <div class="box">slide 3</div>
  <div class="box">slide 4</div>
</div>

偶尔，当它们不同步时，屏幕会看起来像这样:

Answer 1

您可能想在最新的 animate 中添加 setTimeout() complete() 回调函数。所以，通过这种方式，您可以等待最新的动画完成，然后再调用 sp18 函数，否则，如果您不等待动画完成就开始新的动画，最终您将退出同步:

function sp18()
{
    let div = $('#container .box.selected');

    $(div).animate({left:'-50%'}, 500, function()
    {
        $(div).css('left', '150%').removeClass("selected");
        $(div).appendTo('#container');
    });

    $(div).next().animate({left:'0'}, 500, function()
    {
        setTimeout(sp18, 250);

    }).addClass("selected");
}

$(document).ready(function()
{
    setTimeout(sp18, 1000);
});

#container {
  letter-spacing: 0.05em;
  text-align: center;
  width:100%;
  margin-top:2px;
  width: 100%;
  height: 38px;
  overflow: hidden;  
  line-height:38px;
  position: relative;
}

#container .box {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 150%;
  margin-left: 0;
  line-height:38px;
  font-size:13px;
}

#container .box span {
  color:#555
}

#container .box.selected {
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"> 
  <div class="box selected">slide 1</div>
  <div class="box">slide 2</div>
  <div class="box">slide 3</div>
  <div class="box">slide 4</div>
</div>