How Can I Change Text After Time Using Jquery?

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

Solution 1:

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

functionnextMsg() {
    if (messages.length == 0) {
        // once there is no more message, do whatever you wantalert("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 displayvar 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 animationnextMsg();

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

Solution 2:

You'll need several moving parts:

1. jQuery.fade() to animate your text (fading in/out)

2. setTimeout() - to delay execution ("do this, but in 5 seconds from now")

3. window.location = 'http://google.com'; to send user to another page.

Solution 3:

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/

Solution 4:

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).