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

Change the text at every 5 seconds fadeIn/fadeOut

<div class="blog-news">
                        <h3>Blog News</h3>
                        <div class="blog-sect b-sect-1">
                             <div class="april april-1"><span>APR 01</span></div>
                             <p class="first-paragraph">Nice & clean.The best for you blog!</p>
                             <p>vitae tempus quam pellentesque nec nam aliquam sem et tortor</p>
                        </div>
                        <div class="blog-sect b-sect-2">
                              <div class="april april-2"><span>APR 01</span></div>
                              <p class="first-paragraph">What is an ecommerce theme!</p>
                              <p>vitae tempus quam pellentesque nec nam aliquam sem et tortor</p>
                        </div>

</div>

.blog-news {
  position: absolute;
  background-color: #d5dbd4;
  height: 11.5625rem;
  width: 28.75rem;
  margin-left: 30rem; }
  .blog-news h3 {
    font-family: "Aller-Bd";
    font-size: 1rem;
    padding: 0.4375rem; }
  .blog-news p {
    font-family: "Aller-Regular";
    font-size: 0.875rem;
    margin-left: 40px; }
  .blog-news .april-1 {
    position: absolute; }
  .blog-news .april-2 {
    position: absolute; }

.april {
  height: 36px;
  width: 36px;
  background-color: #57c5a0;
  line-height: 20px; }
  .april span {
    color: white;
    font-family: 'Aller-Bd';
    padding: 3px; }

Hey guys i want to fadeIn/Fadeout paragraphs on every 5 seconds and to put every time a new paragraph[can be like 2 or 3 different paragraphs can be 'lorem'] and the function should not stop till i close the page. I hope you understand what i am trying to do and maybe someone can help me.

Marius Furnica
Marius Furnica
9,195 Points

something like this 

var message=$('<p>vitae tempus quam pellentesque nec nam aliquam sem et tortor</p>')
 $('.blog-sect p').fadeOut(5000, function () {
     $(this).html(message).fadeIn(5000);
   });

But i dont know why my second span is dissapearing and i need to make them fadeIn and fadeOut infinitely

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

That's a pretty wild symptom, but it's a result of using a jQuery object as the argument to "html" instead of a string. Changing the message to a plain string fixes it:

var message = "vitae tempus quam pellentesque nec nam aliquam sem et tortor";

Then, to make the sequence repeat you can make it into a function and pass that to "setInterval":

function fader() {
  $(".blog-sect p").fadeOut(5000, function() {
    $(this).html(message).fadeIn(5000);
  });
}
fader();                    // run once now
setInterval(fader, 10000);  // then repeat every 10 seconds

You might also be tempted to have it call itself when "fadeIn" completes, but since the callback is fired for each paragraph, the number of faders would increase each cycle.

Marius Furnica
Marius Furnica
9,195 Points

But it is still repeating the second one.I want after the second paragraph is faiding out the first paragraph to reappear like a circle..