Using jQuery to change text color after set time, and repeat infinitely

Question

I found this answer:

How can I change text after time using jQuery?

Which basically does what I need. But instead of having it redirect to another page at the end, I want it to just keep cycling through the text messages infinitely. Obviously, I remove the IF section to stop the redirecting, but how do I make it repeatedly cycle through the text messages?

function nextMsg() {
    if (messages.length == 0) {
        // once there is no more message, do whatever you want
        alert("redirecting");
    } else {
        // change content of message, fade in, wait, fade out and
        // continue with next message
        $('#message').html(messages.pop()).fadeIn(500).delay(1000)
                                          .fadeOut(500, nextMsg);
    }
};

// list of messages to display var messages = [
//   "Hello!",
//   "This is a website!",
//   "You are now going to be redirected.",
//   "Are you ready?",
//   "You're now being redirected..."
// ].reverse();

// initially hide the message $('#message').hide();

// start animation nextMsg();

You can encase you code inside setInterval() and run it using a timespan — Sushanth --, Sep 24 '12 at 20:23

score 5 · Answer 1 · answered Sep 24 '12 at 20:25

5

Just make small changes in the basic code:

function nextMsg(i) {
    if (messages.length == i) {
        i = 0;
    }

    $('#message').html(messages[i])
                 .fadeIn(500)
                 .delay(1000)
                 .fadeOut(500, function() {
                     nextMsg(i + 1);
                 });
};

nextMsg(0);

DEMO: http://jsfiddle.net/8wqv2/

answered Sep 24 '12 at 20:25

VisioN

143,310
32
282
281

1

I updated your fiddle so that now it's shorter: http://jsfiddle.net/8wqv2/1/ I dropped the whole `if` statement and called `nextMsg(++i%messages.length)` instead. – Michał Miszczyszyn Sep 24 '12 at 20:30
Ah, I see what you're doing there! That makes sense. Thank you! – David Schneider Sep 24 '12 at 20:30
Thanks all! That's perfect, and even more important, I follow the logic. I'm learning! – David Schneider Sep 24 '12 at 20:32

score 0 · Answer 2 · answered Sep 24 '12 at 20:28

0

Would something like this work?

answered Sep 24 '12 at 20:28

pdoherty926

9,895
4
37
68

Using jQuery to change text color after set time, and repeat infinitely

2 Answers2