jQuery:如何显示文字并隐藏然后显示另一个

Question

我正在尝试显示三行文本，每行必须在预览行藏身之后显示。

这是我的HTML代码：

<p id="line1">First Line</p>
<p id="line2">Second Line</p>
<p id="line3">Third Line</p>

我想显示（line1）并等待5秒钟，然后我想隐藏它，然后显示下一行并等待5秒钟并隐藏...等等。

问题是我使用：

$('#line1').show().delay(5000).hide();
$('#line2').show().delay(5000).hide();
$('#line3').show().delay(5000).hide();

所有这些，一起展示并躲藏在一起。我想在排队，第一个，然后是第二个.....等。

我需要你的帮助

Answer 1

在成功回调中做它们

function cycle() {
  $("#line1").show().delay(5000).hide(function() {
    $("#line2").show().delay(5000).hide(function() {
      $("#line3").show().delay(5000).hide(cycle);
    });
  });
}
cycle();

---

您可以使用数组的id使其更简单。

var arr = ["#line1", "#line2", "#line3"]
i = 0;
function cycle() {
  $(arr[i]).show().delay(5000).hide(cycle); 
  i = (i + 1) % arr.length;
}
cycle();

---

如果有很多元素的ID从line开始，则可以执行

之类的事情

var $ele = $('[id^="line1"]'),
i = 0; 
function cycle() {
  $ele[i].show().delay(5000).hide(cycle); 
  i = (i + 1) % arr.length;
}
cycle();

Answer 2

尝试这个

$("document").ready(function() {
  test();
  function test() {
    $('#line1').show().delay(5000).hide(function() {
      $('#line2').show().delay(5000).hide(function() {
        $('#line3').show().delay(5000).hide(function() {
          test();
        });
      });
    });
  }
});

#line1,
#line2,
#line3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="line1">First Line</p>
<p id="line2">Second Line</p>
<p id="line3">Third Line</p>

Answer 3

我相信文本完成后应循环。这是使用jQuery的解决方案。

https://jsfiddle.net/qalkmwdk/

<p id="line-1">First Line</p>
<p id="line-2">Second Line</p>
<p id="line-3">Third Line</p>
<script>
    var divs = $('p[id^="line-"]').hide(),
    i = 0;
(function cycle() { 
    divs.eq(i).fadeIn(400)
              .delay(5000)
              .fadeOut(400, cycle);
    i = ++i % divs.length;
})();
</script>

Answer 4

您必须使用 setInterval()实现此目的。

Answer 5

尝试一下，将所有p标签内容替换为另一个div

jsfiddle

<div class="viewer">
<p id="showme"></p>
</div>
<div class="box">
<p id="line1">First Line</p>
<p id="line2">Second Line</p>
<p id="line3">Third Line</p>
<p id="line4">First Line</p>
<p id="line5">Second Line</p>
<p id="line6">Third Line</p>
</div>

脚本

var allP = $('div.box p').siblings();
var i = 0;
var allPsize = allP.size();
var idSetIntervall = setInterval(function() { 
$('#showme').text($(allP[i]).text());
 i++;
 if (i>=allPsize){
   clearInterval(idSetIntervall);
 }
}, 1000);

CSS

div.box p{
    display:none;
}