Javascript jQuery：如何显示和隐藏文本，然后显示另一个文本？

我试图显示三行文本，每行必须在预览行隐藏后显示

这是我的html代码：

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

所有这些，一起展示，一起隐藏。我想排队，第一个，然后第二个。。。。。等等

我需要你的帮助

---

您可以使用数组的

id

使其更简单

var arr = ["#line1", "#line2", "#line3"]
i = 0;

function cycle() {
  $(arr[i]).show().delay(5000).hide(cycle); 
  i = (i + 1) % arr.length;
}
cycle();

---

如果有许多id以

行开始的元素，请执行以下操作

var $ele = $('[id^="line1"]'),
i = 0; 

function cycle() {
  $ele[i].show().delay(5000).hide(cycle); 
  i = (i + 1) % arr.length;
}
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以
行开始的元素，请执行以下操作

var $ele = $('[id^="line1"]'),
i = 0; 

function cycle() {
  $ele[i].show().delay(5000).hide(cycle); 
  i = (i + 1) % arr.length;
}
cycle();

您必须使用
setInterval（）
来实现这一点。
您必须使用
setInterval（）
来实现这一点。
我认为完成后文本应该循环。下面是一个使用jquery的解决方案


第一行

第二行

第三行

var divs=$（'p[id^=“line-”）.hide（），
i=0；
（函数循环（）{
第eq（i）部分fadeIn（400）
.延迟（5000）
.衰减（400，周期）；
i=+i%divs.length；
})();
我认为文本应该在完成后循环阅读。下面是一个使用jquery的解决方案


第一行

第二行

第三行

var divs=$（'p[id^=“line-”）.hide（），
i=0；
（函数循环（）{
第eq（i）部分fadeIn（400）
.延迟（5000）
.衰减（400，周期）；
i=+i%divs.length；
})();

试试这个

$（“文档”）.ready（函数（）{
test（）；
功能测试（）{
$（'#line1'）.show（）.delay（5000）.hide（function（）{
$（'#line2'）.show（）.delay（5000）.hide（function（）{
$（'#line3'）.show（）.delay（5000）.hide（function（）{
test（）；
});
});
});
}
});
#第1行，
#第2行，
#第3行{
显示：无；
}

第一行

第二行

第三行试试这个
$（“文档”）.ready（函数（）{
test（）；
功能测试（）{
$（'#line1'）.show（）.delay（5000）.hide（function（）{
$（'#line2'）.show（）.delay（5000）.hide（function（）{
$（'#line3'）.show（）.delay（5000）.hide（function（）{
test（）；
});
});
});
}
});
#第1行，
#第2行，
#第3行{
显示：无；
}

第一行

第二行

第三行
尝试此操作，将一个div内容替换为另一个div中的所有p标签内容


CSS

尝试此操作，将一个div内容替换为另一个div中的所有p标记内容


CSS

确切地（只要这个答案已经存在，就不需要发布另一个答案，如果有人怀疑它是否有效，只需添加小提琴）文本到达结尾后不应该循环吗？我认为循环它是可行的。没错。（只要这个答案已经存在，就不需要发布另一个答案，如果有人怀疑它是否有效，只需添加小提琴）文本到达结尾后不应该循环吗？我认为循环它是可行的。
<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>

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

div.box p{
    display:none;
}