简单的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

你可能想在最新的setTimeout() animate回调函数中添加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>

Answer 2

在你的javascript末尾有一个额外的});，删除它使代码按预期工作。

或者你可以将所有内容放在$(document).ready()中，如下所示：

$(document).ready(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, 8000);
  }

  setTimeout(sp18, 3000);
});

这里的codepen演示：https://codepen.io/anon/pen/JVXJBz