我试图让一些文本淡出 1000 毫秒，等待 1000 毫秒，将文本更改为数组中的随机条目，然后淡入 1000 毫秒。文本应该在淡出之前不间断地停留 5 秒钟。
我已经设法使文本更改，但我还没有找到如何使其淡入淡出。以下是我的网站示例：
HTML/JS：
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1 id = "Welcome"></h1>
</body>
<footer>
<script type = "text/javascript">
//Default greetings
var welcomeList = ["WELCOME", "BIENVENUE", "BIENVENIDO", "HELLO", "SALUT", "HOLA", "BONJOUR"];
//Get random greeting
var welcomeText = welcomeList[Math.floor(Math.random() * welcomeList.length)];
//Add greeting before first change
document.getElementById("Welcome").innerHTML = welcomeText;
var welcomeInterval = setInterval(changeText, 5000);
var FadeOutInterval = setInterval(fadeout, 4000);
var FadeInInterval = setInterval(fadein, 5000);
function changeText() {
welcomeText = welcomeList[Math.floor(Math.random() * welcomeList.length)];
document.getElementById("Welcome").innerHTML = welcomeText;
}
function fadeout() {
$("#Welcome").fadeOut(1000)
}
function fadein() {
$("#Welcome").fadeIn(1000)
}
</script>
</footer>
</html>
文本设法更改，但它不会淡入或淡出。我该如何让它淡入淡出？任何帮助将不胜感激。
这是我认为的最佳实践，因为它使用回调来实际等待动画被确认完成，然后再继续：
//Default greetings
var welcomeList = ["WELCOME", "BIENVENUE", "BIENVENIDO", "HELLO", "SALUT", "HOLA", "BONJOUR"];
//Add greeting before first change
$("#Welcome").text(rando(welcomeList).value);
var SHOWN_TIME = 5000;
var HIDDEN_TIME = 1000;
var FADING_OUT_TIME = 1000;
var FADING_IN_TIME = 1000;
function changeText() {
$("#Welcome").fadeOut(FADING_OUT_TIME, function() {
setTimeout(function() {
document.getElementById("Welcome").innerHTML = rando(welcomeList).value;
$("#Welcome").fadeIn(FADING_IN_TIME, function() {
setTimeout(changeText, SHOWN_TIME);
});
}, HIDDEN_TIME);
});
}
setTimeout(changeText, SHOWN_TIME);<script src="https://randojs.com/1.0.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<h1 id="Welcome"></h1>这是一个更短的版本，但它不使用回调来确保在继续之前完成最后一次迭代(尽管应该是(：
//Default greetings
var welcomeList = ["WELCOME", "BIENVENUE", "BIENVENIDO", "HELLO", "SALUT", "HOLA", "BONJOUR"];
//Add greeting before first change
$("#Welcome").text(rando(welcomeList).value);
setTimeout(function() {
animateChange();
setInterval(animateChange, 8000);
}, 5000);
function animateChange() {
$("#Welcome").fadeOut(1000, function() { $("#Welcome").text(rando(welcomeList).value); }).delay(1000).fadeIn(1000);
}<script src="https://randojs.com/1.0.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<h1 id="Welcome"></h1>在这两种情况下，我都使用 randojs.com 来使随机性更具可读性，因此，如果您喜欢此答案，请确保包括：
<script src="https://randojs.com/1.0.0.js"></script>