Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Marius Furnica
Marius Furnica
9,195 Points

JQuery informations update every 5 seconds

Hey guys can someone help me with a function in JQuery that updates a blog section at every 5 seconds. Lets's say that i have 2 paragraphs in a div: <div> <p>What is an elephant</p> <p>What is a horse</p> </div> And i want them to update with new paragraphs on every 5 seconds. I know i need to use fade in /fade out , and creat some variables with paragraphs but is not working i don't know why.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Please show the code you have now and perhaps we can help you get it working.

Marius Furnica
Marius Furnica
9,195 Points

https://ibb.co/ehiMob

So i have that 4 paragraphs and i am trying to update them every 5 seconds with other paragraphs ,The text dosen't matter. var message=$('<p>dsadsadsadsa</p>'); $('.b-sect-1 p').show().fadeOut(5000).remove().append(message).show().delay(5000).fadeIn(5000); I tried this but is not even close...

6 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

You wouldn't be able to chain "append" to "remove" because once the "remove" is executed the element no longer exists. But you could just replace the contents and fade it back in. Also, you can use the "callback" argument of the "fadeOut" to make sure that it finishes before the next changes take place and without using "delay":

$('.b-sect-1 p').fadeOut(5000, function () {
  $(this).html(message.html()).fadeIn(5000);
});

Note that both paragraphs get replaced with the same content using this particular code, but you could modify it slightly to replace them with different content.

Marius Furnica
Marius Furnica
9,195 Points
Marius Furnica
Marius Furnica
9,195 Points

$(function () { setInterval(function () { $('.blog-sect').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500); }, 5000); }); I manage to fade in and out but how i am going to replace everytime with something

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

My example shows the content being replaced with your sample message — you can wrap my method with a "setInterval" to make it happen on schedule. But for the practical version, the big question is what is it you will be replacing it with?

Marius Furnica
Marius Furnica
9,195 Points
Marius Furnica
Marius Furnica
9,195 Points

Thanks a lot Steven!

Marius Furnica
Marius Furnica
9,195 Points
Marius Furnica
Marius Furnica
9,195 Points

i want to change the paragraphs so the div with april class i want to be the same

Marius Furnica
Marius Furnica
9,195 Points
Marius Furnica
Marius Furnica
9,195 Points

Strange if i put the april class there my css is gone on the divs with april text

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Your descendant selector should work the same with either div as the target's ancestor. If you have any problems with that part, start a fresh question and please attach the actual code instead of a screen image.

Marius Furnica
Marius Furnica
9,195 Points
Marius Furnica
Marius Furnica
9,195 Points

And the problem is that i want to change it like a loop...