簡單的 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 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>

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