按顺序显示的文本

Question

我正在尝试使用文本运行一个简单的序列。我希望文本显示一秒钟，然后显示 hide() 或 fadeOut()，然后显示队列中的 next()。

有人看到我做错了吗？现在，只显示最后一个 div。

旁注，谁能给我指出一个函数或告诉我如何让文本从右侧滑入，就像在这个页面上一样。 https://artversion.com/

$(function() {
  $('.cover1-seq').delay(1000).queue(function(next) {
    $(this).show().prev().hide();
    next();
  })
  /*.toggle("slide", {
  			direction: 'right'
  		}, 1000);*/
});

.cover1-seq {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cover1-seq">
  <h1 class="cover1-title">Apple</h1>
</div>
<div class="cover1-seq">
  <h1 class="cover1-title">Book</h1>
</div>
<div class="cover1-seq">
  <h1 class="cover1-title">Cat</h1>
</div>

Answer 1

javascript 一次执行，在 3 次 '$(this).delay(1000)' 的情况下，会发生的情况是它会一起执行所有内容。

我对您的代码进行了调整，使其每 1 秒运行一次：

$(function() {
  var i = 0;
  $(".cover1-seq").each(function(){
    $(this).delay(1000 * ++i).queue(function() {
      $(this).show().prev().hide();
    });
  });
});

或者，正如所问的那样，它一直在重复。为了在页面加载时执行，我们添加了 '$(document).ready'：

$(document).ready(function() {

  var arr = $(".cover1-seq");
  var arrLen = arr.length;
  var i = 0;

  setInterval(function(){
    $(".cover1-seq").hide();
    $(arr[i]).show();
    i === arrLen ? i = 0 : i++;
  }, 1000);

});

希望对我有所帮助！