All geek questions in one place

How to change text after time using jQuery?

I have never used jQuery before, and I would like to ask how to do something that might seem simple to you. I looked around, but could not find the answer.

Ok, let's say I have an 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>

I want to ask how to create a list of lines, and when the page loads, the first one is displayed, and after a random interval of the specified time, it changes to the next, etc., and maybe 5 later, it redirects the user to another page.

If my posts 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 the css / js file it would be good) and that he had a good look of the fading effect, like the next message came.

Can someone explain to me how this works?

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

+4
source share
4 answers

Here is one way to do this ( 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 modification, you should be able to adjust the interval for each message.

+17
source

You will need some moving parts:

  • jQuery.fade () to animate text (I / O attenuation)

  • setTimeout () - delay execution ("do it, but after 5 seconds from now")

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

+1
source

Initially hide all elements using CSS. Then show them.

You can use the setTimeOut function in Javacript. You can set when 'show' functions are called using this. Another thing you can do is use animation / rendering (animation has a bit more flexibility in what you can do, change color changes, etc.) in jquery. You have a callback that you can use to combine series animation functions together, for example.

 $(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 information here in jquery docs: http://api.jquery.com/category/effects/

+1
source

use a combination of setInterval and jquery append. This will do the job. with the addition, you can add the html content to the specified tag (with class or id).

0
source

Source: https://habr.com/ru/post/979663/

More articles:


All Articles