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 --
– Sushanth --, Commented Sep 24, 2012 at 20:23

VisioN · Accepted Answer · 2012-09-24 20:25:26Z

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, 2012 at 20:25

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

3 Comments

Michał Miszczyszyn Over a year ago

I updated your fiddle so that now it's shorter: jsfiddle.net/8wqv2/1 I dropped the whole if statement and called nextMsg(++i%messages.length) instead.

David Schneider Over a year ago

Ah, I see what you're doing there! That makes sense. Thank you!

David Schneider Over a year ago

Thanks all! That's perfect, and even more important, I follow the logic. I'm learning!

pdoherty926 · Accepted Answer · 2012-09-24 20:28:44Z

0

Would something like this work?

answered Sep 24, 2012 at 20:28

pdoherty926

10.5k5 gold badges47 silver badges75 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related