Problems with looping in jQuery...

Question

Well, heres what I mean.

Go to site.

Where it says latest news, there are some problems.

What i'm trying to do is:

Load site, see the loading bar.(image is in the HTML) The loading bar goes away, theres one paragraph that fades in.

That is what this is for.

// Hides the loading image and fadesin content
  var $latest = $(".latest") 
  $latest
    .hide(); // Hide Content
  setTimeout(function(){
    $('#loading')
      .hide();  
    $latest.fadeIn();
  }
  , 3000);

Now, what I also want to do is hide the paragraph, fadeIn another one, then the one after that. Then restart that and loop allover again.

That is what this is for:

$latest
  .hide()
  .first()
  .show(); 

  refreshId = setInterval(function() {
  next = $(".latest:visible").next(); 
  if (next.length) { 
  $latest.hide();
  next.fadeIn(); 
  } else {
  $(".latest")
    .hide()
    .first()
    .fadeIn();
  }
  }, 3000 );

As you can see, the two scripts conflicts with eachother and the whole thing goes crazy(That and the image keeps appearing). Is there a way to fix it?

Answer 1

Try this:

setTimeout(function() {
    $('#loading').hide(0,rotator);
}, 3000);

function rotator() {
  var $paragraphs = $('#latest-news').find('p.latest'); // the paragraphs
  $paragraphs.first().show();
  var i = 0;
  var looper = setInterval(function() {
    var showpara = i++ % $paragraphs.length; // choose next one to show
    $paragraphs.not(':eq(' + showpara + ')').hide() // hide others
      .end() // back to first selector
      .eq(showpara).fadeIn(); // show the next
    }, 3000);
}

---

Edit: Updated to handle loading message, encapsulate rotator in a function, and trigger that function when the loading message is hidden.