jquery 按顺序显示的文本

wqsoz72f 于 2023-06-22 发布在 jQuery

关注(0)|答案(1)|浏览(132)

我正在尝试运行一个简单的序列与文本。我希望文本显示一秒钟，然后显示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>

jquery

来源：https://stackoverflow.com/questions/43614607/text-showing-in-a-sequence

1条答案

按热度按时间

guykilcj1#

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

});

我希望我有帮助！

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 按顺序显示的文本

1条答案

相关问题

热门标签

最新问答