我有以下代碼可以按間隔更改文本。我想在更改文本時為不透明度添加過渡。還有其他答案使用 jquery 的淡入淡出方法，但不適用于給定的 javascript 代碼。
var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");
var inst = setInterval(change, 1000);
function change() {
elem.innerHTML = text[counter];
counter ;
if (counter >= text.length) {
counter = 0;
// clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
}
}<div id="changeText"></div>更新代碼
function change() {
elem.innerHTML = text[counter];
document.getElementById('s2main').style.opacity = 1;
counter ;
if (counter >= text.length) {
counter = 0;
// clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
}
}
添加了 CSS
#changetext{
opacity:0;
transition: opacity 400ms
過渡僅適用于第一個文本，過渡也需要 3 秒。
uj5u.com熱心網友回復：
最簡單的方法是使用 css 過渡：
#changeText {
transition: opacity 400ms;
}
然后你可以用 JS 設定不透明度值，甚至洗掉/添加不同的類來加速或洗掉效果。
由于您標記了 jQuery 但似乎沒有使用任何標記，因此 jQuery 內置了淡入淡出影片：
$('#changeText').finish().fadeTo(300, 0, function() {
// do stuff
// fade back in again
$('#changeText').finish().fadeTo(300, 1);
});
uj5u.com熱心網友回復：
您可以使用另一個元素作為容器并更改容器的不透明度。如果您想讓一個文本淡入下一個，而不是淡入淡出，那么您可以在此處使用 1 個以上的 span 元素。
另請注意，這是一個粗略的代碼，在視覺上還不夠優雅，因此您應該根據需要調整時間。
var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");
var elemContainer = document.getElementById("changeTextContainer");
var inst = setInterval(change, 1000);
function showText() {
elemContainer.style.opacity = 1;
}
function change() {
elemContainer.style.opacity = 0;
elem.innerHTML = text[counter];
setTimeout (showText, 500);
counter ;
if (counter >= text.length) {
counter = 0;
}
}#changeTextContainer {
transition: opacity 400ms;
}<div id="changeTextContainer"><span id="changeText"></span></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318095.html
標籤：javascript 查询 反应 推特引导 dom