Question

I am wanting to create a loading page that would display a message every 10 seconds much like the one on the Mibbit Web Chat loading page. I would either like the messages to fade out and then a new one show or it could also slide the current message to the left and the new message slides from the right. I am sure this is not as difficult as I think it is, but I am unable to find an answer anywhere.

I am perfectly fine with using Javascript or jQuery on this as I am certain those are the only ways.

I appreciate any help in advance.

Answer 1

To fire a function every 10 seconds, use setInterval. Then, you just need to play around with .fadeIn(), .fadeOut(), or any other effect:

var i = 1;
var sampleMessages = [ "First message", "Second message", "Third, now repeat" ];
setInterval(function() {
  var newText = sampleMessages[i++ % sampleMessages.length];
  $("#message").fadeOut(500, function () {
    $(this).text(newText).fadeIn(500);
  });
}, 10 * 1000);​ // Interval is in milliseconds

Here’s a DEMO.