简单的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函数，否则，如果不等待动画完成就可以开始新的动画，最终您将不同步：< / p>

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