Question

我正在尝试使文本淡出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>

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

Answer 1

这是我认为的最佳实践，因为它使用回调实际上要等到确认动画完成后再继续：

//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>

淡出，更改然后淡入淡出文本

1 个答案: