按顺序显示的文本

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);

});

希望对您有所帮助！

按顺序显示的文本

Text showing in a sequence

javascript

queue

jquery

next