How can I change text after time using jQuery?

Question

I've never used jQuery before, and I would like to ask how to do something that may seem simple to you people. I've looked around but couldn't find an answer.

Okay, so say I have a HTML document;

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Here is a message: <span id="message"></span></p>
</body>
</html>

What I want to ask is how to create a list of strings, and when the page loads the first one is displayed, and after a random interval of specified time it changes to the next one, and so on, and maybe about 5 messages later it would redirect the user to a different page.

If my messages were:

Hello!
This is a website!
You are now going to be redirected.
Are you ready?
You're now being redirected...

In my real site it would be nice if the messages could be hidden from the user (on the page, but in a css/js file it would be fine) and that it had a nice sort of fade effect as the next message came in.

Can someone explain to me how to work this?

I'd just like to add, I have no experience in jQuery (only a little in JavaScript) and I have no idea where the scripts/functions go. Could someone show me how, or link to a beginners guide that shows me this?

Lie Ryan · Accepted Answer · 2011-12-25T18:24:32.363

18

Here is one way to do it (jsfiddle demo):

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();

with a little bit modification, you should be able to customize the interval for each message.

edited Dec 25 '11 at 18:24

answered Dec 25 '11 at 18:18

Lie Ryan

62,238
13
100
144

This works perfectly, although how could I randomize the time it changes to show the next message? Can I specify the range? – Alex Dec 25 '11 at 18:35
the 500 in .fadeIn(500) tells jquery to fade in by 500ms from the start of the fade until it is fully visible. Likewise with the 1000 in .delay(1000) and 500 in .fadeOut(500, ...). You can use the random() function to create a random number (for example usage of random to generate a range of numbers, see http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript). – Lie Ryan Dec 25 '11 at 18:41
can do it infinite, i mean, the random message? – Joe RR Nov 27 '13 at 13:52
How can I modify it to show messages infinitely? I mean these messages are shown recursively. – Irshad Aug 02 '16 at 06:45

score 1 · Answer 2 · answered Dec 25 '11 at 17:57

1

You'll need several moving parts:

jQuery.fade() to animate your text (fading in/out)
setTimeout() - to delay execution ("do this, but in 5 seconds from now")
window.location = 'http://google.com'; to send user to another page.

answered Dec 25 '11 at 17:57

Sergio Tulentsev

226,338
43
373
367

score 1 · Answer 3 · answered Dec 25 '11 at 17:57

Initially hide all the elements with CSS. Then show them.

You could use the setTimeOut function in Javacript. You can set when the 'show' functions are called using this. The other thing you can do is use the animate/show (animate has a bit more flexibility in what you can do fades colour changes etc) function in jquery. This has a call back you can use so you can chain the series animation functions together e.g.

$(firstelement).animate({animateionstuff},5000,function(){$(secondelement).animate({animationstuff})});

or

$(firstelement).show(function(){$(secondelement).show(function(){do more stuff})});

In the second example you can also set the duration.

More info here in jquery docs: http://api.jquery.com/category/effects/

score 0 · Answer 4 · answered Dec 25 '11 at 17:56

0

use combination of setInterval and jquery append. That will do the work. with append you can add html content in the specified tag( with a class or id).

answered Dec 25 '11 at 17:56

Deept Raghav

1,430
13
14

How can I change text after time using jQuery?

4 Answers4

Linked