Javascript 淡出、更改然后淡入文本，延迟_Javascript_Jquery

Javascript 淡出、更改然后淡入文本，延迟

javascript jquery

Javascript 淡出、更改然后淡入文本，延迟,javascript,jquery,Javascript,Jquery,我试图让一段文字淡出1000毫秒，等待1000毫秒，将文字更改为数组中的随机条目，然后淡入1000毫秒。文本应该在淡出前不间断地保持5秒钟我已经设法改变了文本，但我还没有找到如何使其淡入淡出。以下是我的网站示例： HTML/JS： <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></scr

我试图让一段文字淡出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>


//默认问候语
var welcomeList=[“欢迎”，“欢迎”，“欢迎”，“欢迎”，“欢迎”，“你好”，“敬礼”，“你好”，“你好”]；
//随意打招呼
var welcomeText=welcomeList[Math.floor（Math.random（）*welcomeList.length）]；
//在第一次更改之前添加问候语
document.getElementById（“欢迎”）.innerHTML=welcomeText；
var welcomeInterval=setInterval（changeText，5000）；
var FadeOutInterval=设置间隔（fadeout，4000）；
var FadeInInterval=设定间隔（fadein，5000）；
函数changeText（）{
welcomeText=welcomeList[Math.floor（Math.random（）*welcomeList.length）]；
document.getElementById（“欢迎”）.innerHTML=welcomeText；
}
函数衰减（）{
美元（“#欢迎”）。淡出（1000）
}
函数fadein（）{
$（“#欢迎”）.fadeIn（1000）
}

文本可以更改，但不会淡入或淡出。我如何使它淡入淡出？任何帮助都将是非常感谢的。

< P>这是我认为最好的做法，因为它使用回调实际等待，直到动画被确认完成之前，继续：

//默认问候语
var welcomeList=[“欢迎”，“欢迎”，“欢迎”，“欢迎”，“欢迎”，“你好”，“敬礼”，“你好”，“你好”]；
//在第一次更改之前添加问候语
$（“#欢迎”）.text（rando（welcomeList.value）；
显示的var_时间=5000；
var隐藏时间=1000；
var衰减时间=1000；
var衰减时间=1000；
函数changeText（）{
$（“#欢迎”）.fadeOut（淡出时间，函数（）{
setTimeout（函数（）{
document.getElementById（“欢迎”）.innerHTML=rando（welcomeList）.value；
$（“#欢迎”）.fadeIn（淡入时间，函数（）{
设置超时（更改文本，显示时间）；
});
}，隐藏时间）；
});
}
设置超时（更改文本，显示时间）