Implementing Fade in Fade Out on Array of Text in jQuery

Question

I have an array of text that I'd like to iterate through and call the fadeIn and fadeOut functions in jQuery on.

var hellos = ["hi, i'm", "bonjour, je m'appelle", "hallo, ich heiße"]

The html code would look something like this:

<h2><span id="hellos"></span>Ch1maera</h2>

Ideally, on the front page of my website it would read something like "hi, i'm ch1maera" and then cycle through the different hellos, fading them in and then fading them out, while leaving "ch1maera" on the screen. If possible, I'd like to isolate the "ch1maera" from the hellos so that it stays in the same place and doesn't move depending on the length of the hellos in the list, if that makes sense. How would this be done?

ibrahim mahrir · Accepted Answer · 2017-04-30 01:54:15Z

6

You can set the text-align of h2 to right so that Ch1maera won't get moved by the hellos.

var hellos = ["hi, i'm", "bonjour, je m'appelle", "hallo, ich heiße"];
var index = 0;                                // index of the currently displayed hello
$("#hellos").text(hellos[0]);                 // start by showing a hello

(function animate() {                         // the function responsibe for the animation
  $("#hellos").fadeOut(1000, function() {     // first fadeOut #hellos
    index = (index + 1) % hellos.length;      // when fadeOut complete, increment the index (check if go beyond the length of the array)
    this.textContent = hellos[index];         // change text accordingly
  }).fadeIn(1000, animate);                   // then fadeIn. When fadeIn finishes, call animate again
})();

h2 {
  text-align: right;
  padding-right: 40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><span id="hellos"></span> Ch1maera</h2>

answered Apr 30, 2017 at 1:54

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pbalazs89 Over a year ago

Thank you. This solution worked great. One question I'd like to ask is. Why is it so that this only works with ID's and not classes? I tried changing $("#hellos") to $(".yourchosenclass") and the loop did not work. Can't figure it out.

ibrahim mahrir Over a year ago

@Pbalazs89 sorry for the late response. The class selector should work as well, just make sure you are selecting the right element. IDs are unique, whereas classes can be assigned to multiple elements at once, so you may be selecting another element with the same class and not the element you intend to.

Andrew Buccellato Over a year ago

Does anyone know why this could break when installed on AWS servers? It always stops after the second item in the array.

Ashirbad Ray · Accepted Answer · 2022-12-05 12:46:14Z

0

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script>
    var msg = ["Test Number 1", "Test Numero Dos", "Test, the third"];

$( document ).ready(function(){
    fade();
    setInterval(fade, 5000);
});

var i = 0;
function fade() {
  $('#message').fadeOut(1000, function() {
    i++;
    if(i>=msg.length)
    {
        i=0;
        
    }
    $('#message').html(msg[i])
    $('#message').fadeIn(1000)
 
  });
}
    
    
    </script>
</head>
<body>
    <div id="message" style="display:none;">TEST MESSAGE</div>

</body>
</html>

answered Dec 5, 2022 at 12:46

Ashirbad Ray

12 bronze badges

Collectives™ on Stack Overflow

Implementing Fade in Fade Out on Array of Text in jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related