2

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

文本设法改变，但它不会淡入或淡出。我将如何使它淡入淡出？任何帮助将不胜感激。

4

1 回答 1

2

这是我认为最好的做法，因为它使用回调来实际等到动画被确认完成后再继续： 

//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>
于 2020-01-01T17:40:31.620 回答