JQuery: Make a series of strings from an array fade in and out in sequence

Question

I am trying to get a set of strings in an array to fade in and out, then change to the next string in the array. The code below skips directly to the third element in the array. I can't see how or why.

var msg = ["Test Number 1", "Test Numero Dos", "Test, the third"];

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

function fade() {
  var i;
  for (i = 0; i < msg.length; ++i) {
    $('#message').html(msg[i]);
    $('#message').fadeIn(1000, function(){
      $('#message').delay(30000).fadeOut(1000); 
    });
  };

}

<div id="message" style="display:none;">TEST MESSAGE</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Blue · Accepted Answer · 2018-01-16 20:52:20Z

2

Let the setInterval do the actual fading. Don't do any for/loops inside the actual function, or you defeat the purpose of the fade (It's looping through the entire array right then and there quickly, and displaying the last result). The fade function should simply get the next index of the array, and do the fading for that element:

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() {
    $('#message').html(msg[i++ % msg.length]);
    $('#message').fadeIn(1000)
  });
}

<div id="message" style="display:none;">TEST MESSAGE</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

answered Jan 16, 2018 at 20:52

Blue

23k7 gold badges69 silver badges102 bronze badges

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

3 Comments

Michael Gajeski Over a year ago

That did it. Thanks!

Michael Gajeski Over a year ago

One quick question though, I'm having trouble figuring out how to set the duration that the message stays on screen. I tried to use a .delay again on the fadeout, but this just seems to increase the time between the messages appearing. What's the best way to handle that?

Blue Over a year ago

Just change the 5000 in setInterval(fade, 5000); @MichaelGajeski

Collectives™ on Stack Overflow

JQuery: Make a series of strings from an array fade in and out in sequence

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related