Displaying a list of texts sequentially with fade in and fade out effect.

Question

I would love to display the following list of text in sequential order, with fadein/out effect and eventually display the image and stops at there. I also would love to display all these texts in center.

<div>a<div>
<div>b</div>
<div>c</div>
<div>d</div>
<div><img src="mypict.jpg" alt="my pict" /></div>

This are all I have for the page, I want to make it as an intro page. I know jquery has fadein() and fadeout(), and I have tried the innerfade plugin. But it always place the text on the left and it loops infinitely.

Answer 1

Pretty much copy-pasted from this page, at old.nabble.com

$(function() {
   var $sequence = $('div').hide(), div = 0;
   (function(){
       $($sequence[div++]).fadeIn('slow', arguments.callee);
   })();
});

Use CSS to position the divs in the center (horizontally):

div {margin: 0 auto; width: 50%; text-align: center; }

Width is defined since a block element -the div- would otherwise take the whole horizontal space. The text-align: center; is if you want the text to be centered within the divs.

Answer 2

Give the last div containing the image a class of "last":

<div class="last"><img src="mypict.jpg" alt="my pict" /></div>

$('div').each(function(){
   $(this).fadeIn('slow');

   if(!$(this).hasClass('last')){
      $(this).fadeOut('slow');
   }
});

You can also setTimeouts or callback functions within the fadeIn's and fadeOut's if you want something to happen afterward.