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

Question

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

Answer 1

我使用 jQuery和函数为您创建了一个工作示例****HERE**** 。如果你想在循环中添加更多文本，只需添加一个新的类和标签。您还需要将 jQuery 代码中的变量更改为循环中的文本数。animate()setTimeoutdivtextDivpmaxCount

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>

CSS：

* {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;
}

jQuery :

$(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);
}