Jquery 如何在特定时间主动替换页面上显示的文本？

最好使用Jquery（css或html就可以了），如何替换按持续时间显示的文本？例如Groundsweel PR页面。

我使用jQuery

animate（）

和

setTimeout

函数为您创建了一个工作示例。如果要在循环中添加更多文本，只需使用

textDiv

类和

p

标记添加一个新的

div

。您还需要将jQuery代码中的

maxCount

变量更改为循环中的文本数

HTML：

<div class="container">
  <div class="textDiv"><p class="text1"> This is text 1</p></div>
  <div class="textDiv"><p class="text2"> Another text to show how it works</p></div>
</div>

* {box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  height: 200px;
  width: 400px;
  margin: 20px auto;
  background: #d9f9fc;
  text-align: center;
  border-radius: 10px;
}

.textDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 40px;
  width: 100%;
  font-size: 2em;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(0,0,0,1);
  -webkit-transform: translateX(-50%) translatey(-50%);
    -moz-transform: translateX(-50%) translatey(-50%);
    transform: translateX(-50%) translatey(-50%);
}
.text2 {
  opacity:0;
}

$(document).ready(function() {
   var count = 1;
   var maxCount = 2;
   textAnimate(count,maxCount);
});

function textAnimate(count,maxCount) {
    $(".text"+count).animate({
       opacity: '0'
    }, { duration: 300, queue: false });

    count++;
    if (count > maxCount) {count = 1;}

    $(".text"+count).animate({
       opacity: '1'
    }, { duration: 300, queue: false });

    window.setTimeout(function() { textAnimate(count,maxCount) }, 1000);
}

jQuery：

<div class="container">
  <div class="textDiv"><p class="text1"> This is text 1</p></div>
  <div class="textDiv"><p class="text2"> Another text to show how it works</p></div>
</div>

* {box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  height: 200px;
  width: 400px;
  margin: 20px auto;
  background: #d9f9fc;
  text-align: center;
  border-radius: 10px;
}

.textDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 40px;
  width: 100%;
  font-size: 2em;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(0,0,0,1);
  -webkit-transform: translateX(-50%) translatey(-50%);
    -moz-transform: translateX(-50%) translatey(-50%);
    transform: translateX(-50%) translatey(-50%);
}
.text2 {
  opacity:0;
}

$(document).ready(function() {
   var count = 1;
   var maxCount = 2;
   textAnimate(count,maxCount);
});

function textAnimate(count,maxCount) {
    $(".text"+count).animate({
       opacity: '0'
    }, { duration: 300, queue: false });

    count++;
    if (count > maxCount) {count = 1;}

    $(".text"+count).animate({
       opacity: '1'
    }, { duration: 300, queue: false });

    window.setTimeout(function() { textAnimate(count,maxCount) }, 1000);
}

---

谢谢我在摆弄我的背景，然后我就开始工作了，我对jQuery不是很在行，但是因为你介绍的textAnimate函数，我现在就得到了它。