CODEWITHSUNDEEP
javascriptjquery
sombat92
sombat92

Reputation: 109

Fade out, change then fade in text with delays

I am trying to make a bit of text fade out for 1000 milliseconds, wait for 1000 milliseconds, change the text to a random entry in an array then fade in for 1000 milliseconds. The text is supposed to stay there uninterrupted for 5 seconds before fading out.

I have already managed to make the text change, but I have yet to find out how to make it fade in and out. Below is a sample of my website:

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>

The text manages to change, but it won't fade in or out. How would I make it so it fades in and out? Any help would be greatly appreciated.

Upvotes: 2

Views: 541

Answers (1)

Aaron Plocharczyk
Aaron Plocharczyk

Reputation: 2832

This is what I consider to be the best practice because it uses callbacks to actually wait until the animation has been confirmed to be complete before continuing: 

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

And this is a version that is shorter, but it doesn't use a callback to make sure the last iteration is complete before continuing (though it should be):

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

In both cases, I used randojs.com to make the randomness more readable, so if you like this answer, make sure to include:

<script src="https://randojs.com/1.0.0.js"></script>

Upvotes: 2

Related Questions