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

在您的 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

Answer 2

您可能希望在最新的 animate complete() 回调函数中添加 setTimeout()。因此，通过这种方式，您可以在再次调用 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>

简单 JQuery 滑动效果不同步

Simple JQuery Sliding Effect Gets Out of Sync

javascript

jquery

jquery-animate