我正在嘗試為我的網站制作一個字幕，但是，我被一件事困住了。我已經做到了，所以每 20 秒選框內的文本就會發生變化，但是，我不喜歡文本的變化方式。我想讓它使舊文本淡出，新文本淡入。
任何幫助將不勝感激。對此相對較新:) 這是更改文本的腳本：
<span id="fadeEl">random starting text</span>
----
let text = [ "example 1", "example 2", "example 3", "example 4"];
let counter = 0;
setInterval(change, 20000);
function change() {
document.getElementById("fadeEl").innerHTML = text[counter];
counter ;
if(counter >= text.length) {
counter = 0;
}
}
uj5u.com熱心網友回復：
你的 CSS 中可以有兩個類：
const text = ["example 1", "example 2", "example 3", "example 4"];
let counter = 0;
setInterval(change, 5000);
function change() {
document.getElementById("fadeEl").setAttribute("class", "text-fade");
setTimeout(() => {
document.getElementById("fadeEl").innerHTML = text[counter];
document.getElementById("fadeEl").setAttribute("class", "text-show");
}, 1000)
counter ;
if (counter >= text.length) {
counter = 0;
}
}.text-show {
color: black;
opacity: 1;
transition: all 1s ease;
}
.text-fade {
color: black;
opacity: 0;
transition: all 1s ease;
}<span id="fadeEl" class="text-show">example 1</span>然后你的HTML：
<div id="fadeEl" class="text-show">Text Here!</div>
現在如果你改變類，它會淡入淡出。請記住setTimout，在更改文本之前，您需要在函式中添加 1 秒來處理淡出。
uj5u.com熱心網友回復：
您還可以使用transitionend事件...
const
marqueeLike = document.querySelector('#marquee-like')
, textList = (function* () { // IIGFE
const arr = [ 'example 1', 'example 2', 'example 3', 'example 4' ];
let idx = -1;
for(;;) {
idx = idx % arr.length;
yield arr[idx];
yield arr[idx];
}}())
, marqueeChange =_=> {
marqueeLike.textContent = textList.next().value;
marqueeLike.classList.toggle('fade-in');
};
marqueeLike.ontransitionend = marqueeChange;
// window.addEventListener('DOMContentLoaded', marqueeChange ); // doesn't work with SO snippet...
setTimeout(marqueeChange, 500 ); // to replace DOMContentLoaded for SO snippet demo... #marquee-like {
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
font-size : 20px;
opacity : 0;
transition : opacity 1s ease;
}
#marquee-like.fade-in {
opacity : 1;
}<p id="marquee-like"> Text Here! </p>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/517450.html
上一篇：將8個按鈕放置成八角形