如何在特定時間內在頁面上顯示正在顯示的文本？

Question

最好使用jquery（css或html很好），我如何替換顯示持續時間的文本？一個例子就像Groundswell PR頁面。

Answer 1

我使用jQuery animate()和setTimeout函數爲您創建了一個工作示例****HERE****。如果您想要在循環中添加更多文本，只需添加一個新的div與textDiv類和p標記。您還需要將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> 

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