个人中心
gpt4 book ai didi

javascript - 淡出、更改然后淡入文本并延迟

转载 作者：行者123 更新时间：2023-12-01 03:58:33 29 4
gpt4 key购买 nike

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

关于javascript - 淡出、更改然后淡入文本并延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59554620/

29 4 0
文章推荐： python - 隐式推荐系统的K折交叉验证优化
文章推荐： visual-studio-2010 - VS2010有什么办法可以导出watch窗口的内容
文章推荐： python - 有效比较 Pandas Dataframe 中的行数据
文章推荐： javascript - arcgis-JS 折线路径在 DRAG 上跟随 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com